Task 资源筛选

config/index.js

@@ -12,9 +12,9 @@ module.exports = {
     proxyTable: {
       "/api": {
         // 请求的目标主机
-        // target: 'http://218.59.175.44:8082/nsgk_test/',  // 公网测试环境
+        target: 'http://218.59.175.44:8082/nsgk_test/',  // 公网测试环境
         // target: `http://192.168.0.116:8091/nsgk_api/`, // 内网测试环境
-        target: 'http://localhost:8080/',
+        //target: 'http://localhost:8080/',
         //target: 'http://192.168.0.106:8080/',
         changeOrigin: true,
         pathRewrite: {

src/components/common/Selector.vue

@@ -0,0 +1,219 @@
+<!-- 下拉列表组件 zhao -->
+<template>
+  <div>
+    <slot/>
+    <van-popup v-model="popupVisible" position="bottom">
+      <van-picker
+        ref="picker"
+        :title="label"
+        show-toolbar
+        :columns="options"
+        :readonly="readonly"
+        :value-key="labelKey"
+        :loading="loading"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+        @change="onChanged"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+export default {
+  name: "Selector",
+  props: {
+    value: {
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    columns: { // 列表数据 Array
+      type: Array,
+      default: () => [],
+    },
+    labelKey: { // 名称键名 String
+      type: String,
+      default: 'label',
+    },
+    valueKey: { // 值键名 String
+      type: String,
+      default: 'value',
+    },
+    remoteUrl: { // 远程列表加载地址 String, 函数, 或 Promise
+      type: [String, Function, Object],
+      default: null,
+    },
+    onRemoteResponse: { // 远程获取到结果的处理回调 String|Function 如果是函数需返回数组, 如果是字符串支持.分割
+      type: [String, Function],
+      default: null,
+    },
+    clear: { // 点击取消时清空绑定值
+      type: Boolean,
+      default: false,
+    },
+    visible: { // 打开状态
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    value: function (newVal, oldVal) {
+      this.internalValue = newVal;
+      this.visibleValue = newVal;
+      this.syncIndex();
+    },
+    columns: function (newVal, oldVal) {
+      this.syncIndex();
+    },
+    remoteUrl: function (newVal, oldVal) {
+      this.requestRemote();
+    },
+    onRemoteResponse: function (newVal, oldVal) {
+      this.parseRemote();
+    },
+    visible: function (newVal, oldVal) {
+      if(newVal != this.popupVisible)
+        this.popupVisible = newVal;
+    },
+    popupVisible: function (newVal, oldVal) {
+      if(newVal != this.visible)
+        this.$emit('update:visible', newVal);
+    }
+  },
+  created() {
+    if(this.remoteUrl)
+      this.requestRemote();
+  },
+  data() {
+    return {
+      popupVisible: false,
+      internalValue: this.value,
+      visibleValue: '',
+      defaultIndex: 0,
+      remoteColumns: null,
+      loading: false,
+      remoteResponse: null,
+    };
+  },
+  methods: {
+    openPopup() {
+      if(!this.readonly)
+      {
+        this.popupVisible = true;
+        this.$nextTick(() => {
+          this.$refs.picker.setIndexes([this.defaultIndex]);
+        })
+      }
+    },
+    closePopup() {
+      this.popupVisible = false;
+    },
+    onChanged(data) {
+      this.$emit('change', data);
+    },
+    onConfirm(data) {
+      this.syncValue(data);
+      this.$emit('input', this.internalValue);
+      this.$emit('confirm', this.internalValue);
+      this.closePopup();
+    },
+    onCancel() {
+      this.closePopup();
+      if(this.clear)
+      {
+        this.visibleValue = '';
+        this.internalValue = null;
+        this.$emit('input', this.internalValue);
+      }
+      this.$emit('cancel');
+    },
+    getValue(data) {
+      return typeof(data) === 'object' && this.valueKey ? data[this.valueKey] : data;
+    },
+    getLabel(data) {
+      return typeof(data) === 'object' && this.labelKey ? data[this.labelKey] : data;
+    },
+    syncValue(data) {
+      this.internalValue = this.getValue(data);
+      this.visibleValue = this.getLabel(data);
+    },
+    syncIndex() {
+      let columns = this.getColumns();
+      if(!columns)
+        return -1;
+      for(let i in columns)
+      {
+        if(this.getValue(columns[i]) == this.internalValue) {
+          this.defaultIndex = i;
+          this.visibleValue = this.getLabel(columns[i]);
+          this.onChanged(columns[i]);
+          return i;
+        }
+      }
+      if(1) // 不存在
+      {
+        this.defaultIndex = -1;
+        this.visibleValue = this.internalValue;
+        this.onChanged(null);
+      }
+      return -1;
+    },
+    getColumns() {
+      return this.columns ? this.columns : this.remoteColumns;
+    },
+    requestRemote() {
+      if(!this.remoteUrl)
+        return;
+      this.loading = true;
+      this.remoteColumns = [];
+      let promise = typeof(this.remoteUrl) === 'function' ? this.remoteUrl() : (this.remoteUrl instanceof Promise ? this.remoteUrl : request(this.remoteUrl));
+      promise.then((resp) => {
+        this.remoteResponse = resp;
+        this.parseRemote();
+        this.syncIndex();
+      }).catch((e) => {
+        console.error(e);
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    parseRemote() {
+      if(!this.remoteResponse)
+        return;
+      let type = typeof(this.onRemoteResponse);
+      if(type === 'function')
+        this.remoteColumns = this.onRemoteResponse(this.remoteResponse);
+      else if(type === 'string')
+      {
+        let arr = this.onRemoteResponse.split('.');
+        let ptr = this.remoteResponse;
+        for(let i in arr)
+        {
+          ptr = this.remoteResponse[arr[i]];
+        }
+        this.remoteColumns = ptr;
+      }
+      else
+        this.remoteColumns = this.remoteResponse;
+    },
+  },
+  computed: {
+    options() {
+      return this.columns ? this.columns : (this.remoteColumns || []);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/sunVillage_info/fixedAssetsAdd.vue

@@ -262,7 +262,7 @@
                <van-stepper v-model="form.depreciationYears" input-width="100" min="0" @change="changeDepreciationYears" />
              </template>
            </van-field>
-           <van-field readonly v-model="form.depreciationValue" label="累计折旧(元)" placeholder="0" input-align="right" :border="false" @change="changeDepreciationValue"
+           <van-field v-model="form.depreciationValue" label="累计折旧(元)" placeholder="0" input-align="right" :border="false" @change="changeDepreciationValue"
            >
              <template #button>
                <van-button size="small" type="primary" round @click="calcDepreciationValue" native-type="button">重新计算</van-button>

src/views/sunVillage_info/resource.vue

@@ -8,8 +8,12 @@
        <div class="search_info">
           <div class="search_block">
               <i class="icon"></i>
-              <input type="text" class="ipt" v-model="queryParams.name" placeholder="搜索" @input="getSearchList">
-<!--              -->
+              <input type="text" class="ipt" v-model="queryParams.name" :placeholder="searchPlaceholder" @input="getSearchList">
+            <selector :visible.sync="typeVisible" v-model="queryParams.resourceType" :columns="resource_type" clear value-key="dictValue" label-key="dictLabel" @confirm="refresh" @cancel="refresh">
+              <template>
+                <van-icon name="filter-o" color="#1989fa" class="filter-icon" @click="openResourceType" />
+              </template>
+            </selector>
           </div>
           <div class="total">共{{listLength}}个资产</div>
        </div>
@@ -80,9 +84,10 @@
    } from "@/api/sunVillage_info/fixedAssets";
    import request from '@/utils/request'
    import MapGisLine from "@/components/Map/MapGisLine";
+   import Selector from "@/components/common/Selector.vue";
    export default {
      name: "certificateList",
-     components: { MapGisLine,},
+     components: {Selector, MapGisLine,},
      data() {
        return {
          theGeom:'',
@@ -103,7 +108,8 @@
            orderByColumn:'createTime',
            isAsc:'desc',
            translate_dict:1,
-           name:''
+           name:'',
+           resourceType: null,
          },
          uploadFiles1:[],
          projectId:'',
@@ -111,7 +117,9 @@
          showBtn:true,
          listMap: 0,
          resourceId: null,    // 资源ID，记录当前资源的ID
-         resourceList: []     // 资源列表，存储本账套下所有的资源信息
+         resourceList: [],     // 资源列表，存储本账套下所有的资源信息
+         typeVisible: false,
+         resource_type: [],
        };
      },
      created() {
@@ -124,6 +132,9 @@
        this.houseGetDicts("use_type").then((response) => {
          this.useTypeOptions = response.data;
        });
+       this.houseGetDicts("resource_type").then((response) => {
+         this.resource_type = response.data;
+       });
      },
      methods: {
        saveGeom(){
@@ -276,7 +287,23 @@
        goAdd(){
          this.$router.push('/sunVillage_info/resourceAdd')
        },
+       openResourceType() {
+         this.typeVisible = true;
+       },
+       refresh() {
+         this.queryParams.pageNum = 1;
+         this.listLength = 0;
+         this.applicationList = [];
+         this.finished = false;
+         this.getList();
+       },
      },
+     computed: {
+       searchPlaceholder() {
+         let typeName = this.resource_type.find((x) => x.dictValue == this.queryParams.resourceType);
+         return '搜索' + (typeName ? typeName.dictLabel : '');
+       },
+     }
    }
  </script>
  <style scoped lang="scss">
@@ -328,7 +355,7 @@
         background: #fff;
         display: flex;
         border:2px solid #3494ff;
-        padding-right: 35px;
+        padding-right: 20px;
         align-items: center;
         .icon{
             width: 30px;
@@ -338,6 +365,12 @@
             display: block;
             margin:0 8px 0 26px;
         }
+          .filter-icon {
+            font-weight: bold;
+            font-size: .4rem;
+            width: .6rem;
+            text-align: center;
+          }
         .ipt{
         flex: 1;
         font-size: 26px;