显示栏位管理

src/utils/common.js

@@ -1,4 +1,4 @@
-
+import api from '@/api'
 export default {
   //object转字符串
   objectToString(val) {
@@ -90,7 +90,12 @@ export default {
   //获取表格数据
   getColumnData(row,field,prop){
     if(field.type == 'Array'){
-      return row[field.value].join('、')
+      if(row[field.value]){
+        return row[field.value].join('、')
+      }else{
+        return '--'
+      }
+      
     }else{
       return row[field.value] || '--'
     }
@@ -100,4 +105,20 @@ export default {
   checkViewer(guid){
     return `/fileManager/downloadFile?fileId=${guid}`
   },
+
+  //查看显示栏位管理
+  async getCustomField(type){
+    var params = {
+      tableName:type
+    }
+    var a = []
+   await api.getCustomField(params).then((response) => {
+      if (response.code == 200) {
+        a = response.data.data
+      }
+    }).catch(error=>{
+      return []
+    });
+    return a
+  }
 }

src/views/components/dialog/fields.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <el-dialog
-      title="提示"
+      custom-class="myFields"
+      title="显示栏位管理"
       :visible.sync="dialogVisible"
-      width="50%"
+      width="300px"
       :before-close="handleClose"
+      :close-on-click-modal="false"
     >
       <div>
         <el-checkbox
@@ -13,19 +15,27 @@
           @change="handleCheckAllChange"
           >全选</el-checkbox
         >
-        <div style="margin: 15px 0"></div>
+        <p></p>
         <el-checkbox-group v-model="checked" @change="handleCheckedChange">
-          <el-checkbox
-            v-for="field in filedList"
-            :label="field.value"
-            :key="field.value"
-            >{{ field.name }}</el-checkbox
-          >
+          <template>
+            <div  v-for="(field,index) in filedList" :key="field.value" style="padding:5px 0;">
+              <el-checkbox :label="field.value">
+                <div>
+                  <div>{{ field.name }}</div>
+                  <div>
+                    <i class="el-icon-sort-down down" :disabled="index == filedList.length-1" @click.stop.prevent="down(index,field)"></i>
+                    <i class="el-icon-sort-up up" :disabled="index == 0" @click.stop.prevent="up(index,field)"></i>
+                  </div>
+                </div>
+              </el-checkbox>
+            </div>
+          </template>
+          
         </el-checkbox-group>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
-        <el-button type="primary" @click="submit">确 定</el-button>
+        <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -35,12 +45,6 @@
 export default {
   components: {},
   props: {
-    filedList: {
-      type: Array,
-      default: () => {
-        return [];
-      },
-    },
     type:{
       type:String,
       default:''
@@ -56,43 +60,66 @@ export default {
       checkAll: false,
       //选择
       checked: [],
+      //显示栏位
+      filedList:[],
+      //按钮加载
+      loading:false
     };
   },
   watch: {},
   computed: {},
   created() {},
   mounted() {
-    //获取显示栏位
-    this.getCustomField(this.type);
   },
   methods: {
-    getCustomField(type) {
-      if(!this.type) return;
-      var params = {
-        tableName: type,
-      };
-      this.$api.getCustomField(params).then((response) => {
-        if (response.code == 200) {
-          this.filedList.push(...response.data.data)
-          this.$emit('getFieldList',this.filedList)
-        }
-      }).catch(error=>{
-        this.filedList.splice(0)
-        this.$emit('getFieldList',this.filedList)
-      });
-    },
+
     //打开栏位
     open(data) {
+      this.filedList  = JSON.parse(JSON.stringify(data))
+      this.checked = data.filter(item=>{
+        return item.ifHidden == false
+      }).map(item=>{
+        return item.value
+      })
+      this.handleCheckedChange(this.checked)
       this.dialogVisible = true;
     },
+    //下移
+    down(index,file){
+      var arr = this.filedList
+      this.filedList.splice(index, 2, arr[index + 1], arr[index])
+    },
+    //上移
+    up(index,file){
+      var arr = this.filedList
+      this.filedList.splice(index - 1, 2, arr[index], arr[index - 1])
+    },
     //关闭弹窗
     handleClose() {
       this.dialogVisible = false;
     },
     //提交更改
     submit() {
-      this.$api.setCustomField().then(()=>{
-        
+      for(var i = 0; i < this.filedList.length; i++ ){
+        if(this.checked.includes(this.filedList[i].value)){
+          this.filedList[i].ifHidden = false
+        }else{
+          this.filedList[i].ifHidden = true
+        }
+      }
+      var params = {
+        tableName : this.type,
+        value:this.filedList
+      }
+      this.loading = true
+      this.$api.setCustomField(params).then((response)=>{
+        if(response.code == 200){
+          this.loading = false
+          this.handleClose()
+          this.$emit('getFieldList',this.filedList)
+        }
+      }).catch(error=>{
+        this.loading = false
       })
     },
     //全选
@@ -105,10 +132,29 @@ export default {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.filedList.length;
       this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.cities.length;
+        checkedCount > 0 && checkedCount < this.filedList.length;
     },
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+.myFields{
+  .el-checkbox{
+    width: 100%;
+    .el-checkbox__label{
+      width:calc(100% - 10px);
+      div{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        i{
+          color: #999;
+        }
+        i:hover{
+          color: #409EFF;
+        }
+      }
+    }
+  }
+}
 </style>

src/views/event/components/index.vue

@@ -66,7 +66,7 @@
     </el-container>
 
     <addEvent ref="addEvent"  @isSuccess="handleSuccess"></addEvent>
-    <fields ref="field"></fields>
+    <fields ref="field" type="event" @getFieldList="getFieldList"></fields>
   </div>
 </template>
 
@@ -130,10 +130,6 @@ export default {
       commonData: [],
       //显示视图
       showView: false,
-      // //场景
-      // scene:[],
-      //表格全部栏位
-      fieldList: [],
       //操作回馈
       handleMessage:'',
     };
@@ -157,12 +153,16 @@ export default {
   },
   created() { },
   async mounted() {
+    this.columnList = await this.$commonJS.getCustomField('event')
     //获取table栏位及分组字段
     await this.getColumn()
     this.getList()
   },
   methods: {
-
+    //显示栏位管理
+    getFieldList(data){
+      this.columnList = data
+    },
     // 子组件新增事件成功
     handleSuccess(val) {
       this.handleMessage = val
@@ -191,9 +191,9 @@ export default {
       await this.$api.getParamsCommon(params).then(res => {
         if (res.code == 200) {
           // 显示栏位
-          this.columnList = res.data[0].conditionDTOList.filter(item => {
-            return item.name != 'Id' && item.ifShow == true
-          })
+          // this.columnList = res.data[0].conditionDTOList.filter(item => {
+          //   return item.name != 'Id' && item.ifShow == true
+          // })
           // 分组字段
           let conditionDTOList= JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
           // this.groupingOption = conditionDTOList.filter(item => {
@@ -317,7 +317,7 @@ export default {
           this.$refs.addEvent.open(null, e)
           break;
         case '3'://显示栏位管理
-          this.$refs.field.open(this.fieldList)
+          this.$refs.field.open(this.columnList)
           break;
       }
     },

src/views/event/components/view/table.vue

@@ -9,7 +9,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column v-for="item in column" :key="item.value" :prop="item.value" :label="item.name" align="center"
+      <el-table-column v-for="item in column.filter(item=>!item.ifHidden)" :key="item.value" :prop="item.value" :label="item.name" align="center"
         sortable="custom">
         <template slot-scope="scope">
           <div v-if="['name', 'reportProjectNum', 'patentProjectNum'].includes(item.value)">

src/views/project/components/view/table.vue

@@ -9,12 +9,12 @@
           </template>
         </el-table-column>
 
-        <el-table-column v-for="item in column" :key="item.key" :prop="item.key" :label="item.name" sortable="custom" align="center">
+        <el-table-column v-for="item in column" :key="item.value" :prop="item.value" :label="item.name" sortable="custom" align="center">
           <template slot-scope="scope">
-            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.key)">
-              <el-link @click="handleItem(scope.row, item.key)">{{ scope.row[item.key] }}</el-link>
+            <div v-if="['name', 'eventNumber', 'projectNumber'].includes(item.value)">
+              <el-link @click="handleItem(scope.row, item.value)">{{ scope.row[item.value] }}</el-link>
             </div>
-            <div v-else v-html="getColumnData(scope.row, item.key)"></div>
+            <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
           </template>
         </el-table-column>
 
@@ -148,20 +148,7 @@ export default {
     handleItem(row, key) {
       // console.log(row,key);
     },
-    // 获取栏位数据
-    getColumnData(row, key) {
-      if (key == 'projectNumber1') {
-        if (row[key]) {
-          var a = ''
-          row[key].forEach(item => {
-            a += item.name + '</br>'
-          });
-          return a
-        } else {
-          return ''
-        }
-      }
-    },
+
 
 
   },

src/views/project/index.vue

@@ -169,8 +169,8 @@ export default {
     }
   },
   created() { },
-  mounted() {
-
+  async mounted() {
+    this.fieldList = await this.$commonJS.getCustomField('patentProject')
     //获取检索字段和分组字段
     this.getColumn()
     //获取应用场景统计
@@ -191,10 +191,6 @@ export default {
       let params = ['patentProject']
       await this.$api.getParamsCommon(params).then(res => {
         if (res.code == 200) {
-          // 显示栏位
-          // this.columnList = res.data[0].conditionDTOList.filter(item => {
-          //   return item.name != 'Id' && item.ifShow == true
-          // })
           // 分组字段
           let conditionDTOList= JSON.parse(JSON.stringify(res.data[0].conditionDTOList))
           this.groupingOption = this.$commonJS.getField(conditionDTOList,(u)=> u.ifGroup == true,{