From 4beb29847c622e78b2b28ba4cdd19f30e1b68279 Mon Sep 17 00:00:00 2001
From: gegeya <gegeya@qq.com>
Date: Sat, 8 Jul 2023 10:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E6=A8=A1=E5=9D=97=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/modulex/ModulexList.vue         | 374 ++++++++++--------
 1 file changed, 219 insertions(+), 155 deletions(-)

diff --git a/ant-design-vue-jeecg/src/views/modulex/ModulexList.vue b/ant-design-vue-jeecg/src/views/modulex/ModulexList.vue
index 75dcdb0..3d8142d 100644
--- a/ant-design-vue-jeecg/src/views/modulex/ModulexList.vue
+++ b/ant-design-vue-jeecg/src/views/modulex/ModulexList.vue
@@ -4,7 +4,6 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-
           <a-col :md="6" :sm="12">
             <a-form-item label="模块中文名称">
               <j-input v-model="queryParam.moduleName"></j-input>
@@ -22,33 +21,47 @@
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="项目名称">
-              <j-dict-select-tag type="list" v-model="queryParam.projectId" dict-code="projectx,project_name,id" placeholder="请选择" />
+              <j-dict-select-tag
+                type="list"
+                v-model="queryParam.projectId"
+                dict-code="projectx,project_name,id"
+                placeholder="请选择"
+              />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="上级模块">
-              <j-dict-select-tag type="list" v-model="queryParam.pid" dict-code="modulex,module_name,id" placeholder="请选择" />
+              <j-dict-select-tag
+                type="list"
+                v-model="queryParam.pid"
+                dict-code="modulex,module_name,id"
+                placeholder="请选择"
+              />
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="6" :sm="12">
             <a-form-item label="模块状态">
-              <j-dict-select-tag type="list" v-model="queryParam.status" placeholder="请选择模块状态" dict-code="a_status"/>
+              <j-dict-select-tag
+                type="list"
+                v-model="queryParam.status"
+                placeholder="请选择模块状态"
+                dict-code="a_status"
+              />
             </a-form-item>
           </a-col>
 
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="责任人">
-              <j-select-user-by-dep placeholder="请选择责任人" v-model="queryParam.managerUsers"/>
+              <j-select-user-by-dep placeholder="请选择责任人" v-model="queryParam.managerUsers" />
             </a-form-item>
           </a-col>
 
           <a-col :md="6" :sm="8">
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -62,58 +75,55 @@
 
     <!-- table区域-begin -->
     <div>
-      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
-        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
+        >项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
       <a-table
         ref="table"
         size="middle"
-        :scroll="{x:true}"
+        :scroll="{ x: true }"
         bordered
         rowKey="id"
-        :columns="columns"
+        :columns="filterColumn"
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
         class="j-table-force-nowrap"
-        @change="handleTableChange">
-
+        @change="handleTableChange"
+      >
         <!-- 管理  公用部分-->
         <span slot="htmlSlot" slot-scope="text, record">
           <a @click="functionManage(record)">功能</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
 
           <a @click="tablexManage(record)">实体</a>
-          <a-divider type="vertical"/>
+          <!-- <a-divider type="vertical" /> -->
+          <br />
           <a @click="viewVid(record)">字段</a>
         </span>
 
-
         <!--功能  管理员-->
         <span slot="actionManage" slot-scope="text, record" v-if="userRole1 === '1'">
+          <a @click="fabu(record)">发布</a>
+          <a-divider type="vertical" />
+          <a @click="tijiao(record)">提交</a>
+          <a-divider type="vertical" />
+          <a @click="kaishi(record)">开始</a>
+          <br />
           <a @click="chehui(record)">撤回</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
 
           <a @click="bugfankui(record)">BUG反馈</a>
-          <a-divider type="vertical"/>
-
+          <br />
           <!--          <a @click="shenhe(record)">审核</a>-->
           <!--          <a-divider type="vertical"/>-->
-
-           <a @click="fabu(record)">发布</a>
-          <a-divider type="vertical"/>
-
-          <a @click="kaishi(record)">开始</a>
-          <a-divider type="vertical"/>
-
-          <a @click="tijiao(record)">提交</a>
         </span>
 
-
         <!--功能 开发者-->
         <!--这里只能用v-else-if / v-else 不能用v-if 用了没效果 原因不清楚-->
         <!--        <span v-else slot="actionManage" slot-scope="text, record">-->
@@ -128,25 +138,27 @@
         <!--          <a @click="tijiao(record)">提交</a>-->
         <!--        </span>-->
 
-
-
         <!--操作 -->
-        <span slot="action1" slot-scope="text, record" >
-
+        <span slot="action1" slot-scope="text, record">
           <a @click="fuzhiProject(record)">复制</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
 
           <a @click="handleEdit(record)">编辑</a>
-          <a-divider type="vertical"/>
-
+          <!-- <a-divider type="vertical" /> -->
+          <br />
           <a @click="handleDetail(record)">详情</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
 
           <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
             <a>删除</a>
           </a-popconfirm>
         </span>
-
+        <span slot="filterDropdown">
+          <a-card>
+            <!-- /* 多选框 options:指定可选项 defaultValue:默认选中的选项 change:变化时回调 */ -->
+            <a-checkbox-group :options="checkColumn" :defaultValue="checkColumn" @change="checkChange" />
+          </a-card>
+        </span>
       </a-table>
     </div>
 
@@ -160,16 +172,16 @@
 <script>
 
 import '@assets/less/TableExpand.less'
-import {mixinDevice} from '@/utils/mixin'
-import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import { mixinDevice } from '@/utils/mixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 import ModulexModal from './modules/ModulexModal'
 
-import {getAction} from "@api/manage";
-import BugxModal from "@views/modulex/modules/BugxModal";
-import store from "@/store";
-import {filterObj} from "@/utils/util";
-import FieldxList from "@views/fieldx/FieldxList.vue";
-import TablexList from "@views/tablex/TablexList.vue";
+import { getAction } from "@api/manage"
+import BugxModal from "@views/modulex/modules/BugxModal"
+import store from "@/store"
+import { filterObj } from "@/utils/util"
+import FieldxList from "@views/fieldx/FieldxList.vue"
+import TablexList from "@views/tablex/TablexList.vue"
 
 export default {
   name: 'ModulexList',
@@ -180,7 +192,7 @@ export default {
     BugxModal,
     ModulexModal
   },
-  data() {
+  data () {
     return {
       description: '模块管理管理页面',
       // 表头
@@ -192,7 +204,7 @@ export default {
           width: 60,
           align: "center",
           customRender: function (t, r, index) {
-            return parseInt(index) + 1;
+            return parseInt(index) + 1
           }
         },
         {
@@ -203,7 +215,20 @@ export default {
         {
           title: '项目',
           align: "center",
-          dataIndex: 'projectId_dictText'
+          width: 130,
+          dataIndex: 'projectId_dictText',
+          customCell: () => {
+            return {
+              style: {
+                wordWrap: 'break-word',
+                wordBreak: 'break-all',
+                whiteSpace: 'normal',
+                minHeight: '50px',
+                width: '50px',
+                'text-align': 'left'
+              }
+            }
+          }
         },
         {
           title: '中文名称',
@@ -226,8 +251,8 @@ export default {
         //   dataIndex: 'pmDescribe'
         // },
         {
-          title:'责任人',
-          align:"center",
+          title: '责任人',
+          align: "center",
           // dataIndex: 'managerUsers'
           dataIndex: 'managerUsers_dictText'
         },
@@ -321,24 +346,39 @@ export default {
           dataIndex: 'htmlSlot',
           align: "center",
           fixed: "right",
-          width:98,
-          scopedSlots: {customRender: 'htmlSlot'}
+          width: 98,
+          scopedSlots: { customRender: 'htmlSlot' },
+          // customCell: () => {
+          //   return {
+          //     style: {
+          //       'text-align': 'left'
+          //     }
+          //   }
+          // }
         },
         {
           title: '功能',
           dataIndex: 'actionManage',
           align: "center",
           fixed: "right",
-          width:147,
-          scopedSlots: {customRender: 'actionManage'}
+          width: 140,
+          scopedSlots: { customRender: 'actionManage' },
+          customCell: () => {
+            return {
+              style: {
+                'text-align': 'left'
+              }
+            }
+          }
+
         },
         {
           title: '操作',
           dataIndex: 'action1',
           align: "center",
           fixed: "right",
-          width:147,
-          scopedSlots: {customRender: 'action1'}
+          width: 100,
+          scopedSlots: { customRender: 'action1', filterDropdown: 'filterDropdown' }
         }
       ],
       url: {
@@ -353,185 +393,209 @@ export default {
       superFieldList: [],
       userRole1: '', //管理员是1 其他是2
       projectIdx: '',
-      loadRouteType:false,
+      loadRouteType: false,
     }
   },
-  created() {
+  created () {
+    // 实例创建完成将columns备份给filterColumns
+    this.filterColumn = this.columns
     let usercode = store.getters.userInfo.id
     //根据id获得当前登录用户角色
     this.loginRole(usercode)
     //console.log('userole1',this.userRole1)
-    this.getSuperFieldList();
+    this.getSuperFieldList()
   },
   computed: {
     importExcelUrl: function () {
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
     },
+    // 用计算属性取出columns的dataIndex，作为多选框的选项数据
+    checkColumn: function () {
+      return this.columns.map(item => item.title)
+    }
   },
   methods: {
-    fanhui(){
+    // 多选框的事件回调
+    checkChange (checked) {
+      // 初始是默认全选的，假设此刻点击了name的选择框
+      console.log(checked) // ['age','address','action']
+      const columns = this.columns
+      // 核心部分，数组过滤循环遍历columns，如果选择的值中包含dataIndex则为true并暴露出去，反之亦然
+      const filterValue = columns.filter(item => {
+        if (checked.includes(item.title)) {
+          // 当暴露值为true时，循环遍历的值会赋给filterValue
+          return true
+        }
+        return false
+      })
+      // 依旧是假设点击的是name的选择框，暴露的值为[false,true,true,true],所以filterValue中的值没有包含name的那一列
+      // 然后将值赋给filterColumns
+      this.filterColumn = filterValue
+    },
+
+    fanhui () {
       this.$router.push({
         /*返回产品*/
         path: '/src/views/projectx/ProjectxList',/*在引号中填写返回vue*/
-      });
+      })
     },
-    loginRole(id){
-      getAction('functionx/functionx/loginrole',{id:id}).then((res)=>{
+    loginRole (id) {
+      getAction('functionx/functionx/loginrole', { id: id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.userRole1 = res.result;
+          this.userRole1 = res.result
           //console.log('this.userRole1',this.userRole1)
         }
       })
     },
-    shenhe(record) {
-      getAction('/modulex/modulex/shenhe', {id: record.id}).then((res) => {
+    shenhe (record) {
+      getAction('/modulex/modulex/shenhe', { id: record.id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.$message.success(res.result);
-          this.loadData();
+          this.$message.success(res.result)
+          this.loadData()
         } else {
-          this.$message.warning(res.message);
+          this.$message.warning(res.message)
         }
       })
     },
-    viewVid(record) {
+    viewVid (record) {
       // console.log(record)
-      let s = null;
-      getAction('/tablex/tablex/list', {moduleId: record.id}).then((res) =>{
-        s=res.result.records
+      let s = null
+      getAction('/tablex/tablex/list', { moduleId: record.id }).then((res) => {
+        s = res.result.records
         console.log(s)
-        if (s[0]==null){
-          this.$message.error("该模块无实体");
-        }else{
-          this.$refs.FieldxList.showModal();
-          this.$refs.FieldxList.edit(s[0]);
-          this.$refs.FieldxList.disableSubmit = false;
+        if (s[0] == null) {
+          this.$message.error("该模块无实体")
+        } else {
+          this.$refs.FieldxList.showModal()
+          this.$refs.FieldxList.edit(s[0])
+          this.$refs.FieldxList.disableSubmit = false
         }
       })
 
     },
     bugfankui: function (record) {
-      this.$refs.BugxModal.add(record.id);
-      this.$refs.BugxModal.title = "BUG反馈";
-      this.$refs.BugxModal.disableSubmit = false;
+      this.$refs.BugxModal.add(record.id)
+      this.$refs.BugxModal.title = "BUG反馈"
+      this.$refs.BugxModal.disableSubmit = false
     },
-    chehui(record) {
-      getAction('/modulex/modulex/cehui', {id: record.id}).then((res) => {
+    chehui (record) {
+      getAction('/modulex/modulex/cehui', { id: record.id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.$message.success(res.result);
-          this.loadData();
+          this.$message.success(res.result)
+          this.loadData()
         } else {
-          this.$message.warning(res.message);
+          this.$message.warning(res.message)
         }
       })
     },
-    tijiao(record) {
-      getAction('/modulex/modulex/tijiao', {id: record.id}).then((res) => {
+    tijiao (record) {
+      getAction('/modulex/modulex/tijiao', { id: record.id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.$message.success(res.result);
-          this.loadData();
+          this.$message.success(res.result)
+          this.loadData()
         } else {
-          this.$message.warning(res.message);
+          this.$message.warning(res.message)
         }
       })
     },
-    kaishi(record) {
-      getAction('/modulex/modulex/kaishi', {id: record.id}).then((res) => {
+    kaishi (record) {
+      getAction('/modulex/modulex/kaishi', { id: record.id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.$message.success(res.result);
-          this.loadData();
+          this.$message.success(res.result)
+          this.loadData()
         } else {
-          this.$message.warning(res.message);
+          this.$message.warning(res.message)
         }
       })
     },
-    fabu(record) {
-      getAction('/modulex/modulex/fabu', {id: record.id}).then((res) => {
+    fabu (record) {
+      getAction('/modulex/modulex/fabu', { id: record.id }).then((res) => {
         if (res.success) {
           //重新计算分页问题
-          this.$message.success(res.result);
-          this.loadData();
+          this.$message.success(res.result)
+          this.loadData()
         }
       })
     },
-    functionManage(record) {
+    functionManage (record) {
       this.$router.push({
         path: '/src/views/functionx/FunctionxList',
         query: {
           moduleid: record.id,
-          project:this.$route.query.project
+          project: this.$route.query.project
         }
         // query: {id: '123456'}
       })
     },
-    tablexManage(record) {
-      this.$refs.TablexList.showModal();
-      this.$refs.TablexList.edit(record);
-      this.$refs.TablexList.disableSubmit = false;
+    tablexManage (record) {
+      this.$refs.TablexList.showModal()
+      this.$refs.TablexList.edit(record)
+      this.$refs.TablexList.disableSubmit = false
       // this.$router.push({
       //   path: '/src/views/tablex/TablexList',
       //   query: {moduleid: record.id,project:this.$route.query.project}
       // })
     },
-    initDictConfig() {
+    initDictConfig () {
     },
-    getSuperFieldList() {
-      let fieldList = [];
-      fieldList.push({type: 'string', value: 'pid', text: '上级模块id', dictCode: ''})
-      fieldList.push({type: 'string', value: 'projectId', text: '项目id', dictCode: ''})
-      fieldList.push({type: 'string', value: 'moduleName', text: '中文名称', dictCode: ''})
-      fieldList.push({type: 'string', value: 'moduleEnName', text: '英文名称', dictCode: ''})
-      fieldList.push({type: 'string', value: 'moduleCode', text: '模块编码', dictCode: ''})
-      fieldList.push({type: 'string', value: 'pmDescribe', text: '内容描述', dictCode: ''})
-      fieldList.push({type: 'string', value: 'managerUsers', text: '责任人', dictCode: ''})
-      fieldList.push({type: 'int', value: 'workLevel', text: '任务等级', dictCode: ''})
-      fieldList.push({type: 'int', value: 'workStatus', text: '任务状态', dictCode: ''})
-      fieldList.push({type: 'date', value: 'publishTime', text: '发布时间'})
-      fieldList.push({type: 'double', value: 'duration', text: '任务时长', dictCode: ''})
-      fieldList.push({type: 'date', value: 'startTime', text: '开始时间'})
-      fieldList.push({type: 'date', value: 'submitTime', text: '提交时间'})
-      fieldList.push({type: 'double', value: 'realDuration', text: '实际时长', dictCode: ''})
-      fieldList.push({type: 'string', value: 'userRole', text: '用户角色', dictCode: ''})
-      fieldList.push({type: 'string', value: 'relatedBean', text: '关联实体', dictCode: ''})
-      fieldList.push({type: 'string', value: 'prototypes', text: '原型图', dictCode: ''})
-      fieldList.push({type: 'string', value: 'diagrams', text: '分析图', dictCode: ''})
-      fieldList.push({type: 'int', value: 'status', text: '模块状态', dictCode: ''})
-      fieldList.push({type: 'int', value: 'verisonStatus', text: '版本状态', dictCode: ''})
-      fieldList.push({type: 'int', value: 'verison', text: '版本号', dictCode: ''})
+    getSuperFieldList () {
+      let fieldList = []
+      fieldList.push({ type: 'string', value: 'pid', text: '上级模块id', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'projectId', text: '项目id', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'moduleName', text: '中文名称', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'moduleEnName', text: '英文名称', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'moduleCode', text: '模块编码', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'pmDescribe', text: '内容描述', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'managerUsers', text: '责任人', dictCode: '' })
+      fieldList.push({ type: 'int', value: 'workLevel', text: '任务等级', dictCode: '' })
+      fieldList.push({ type: 'int', value: 'workStatus', text: '任务状态', dictCode: '' })
+      fieldList.push({ type: 'date', value: 'publishTime', text: '发布时间' })
+      fieldList.push({ type: 'double', value: 'duration', text: '任务时长', dictCode: '' })
+      fieldList.push({ type: 'date', value: 'startTime', text: '开始时间' })
+      fieldList.push({ type: 'date', value: 'submitTime', text: '提交时间' })
+      fieldList.push({ type: 'double', value: 'realDuration', text: '实际时长', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'userRole', text: '用户角色', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'relatedBean', text: '关联实体', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'prototypes', text: '原型图', dictCode: '' })
+      fieldList.push({ type: 'string', value: 'diagrams', text: '分析图', dictCode: '' })
+      fieldList.push({ type: 'int', value: 'status', text: '模块状态', dictCode: '' })
+      fieldList.push({ type: 'int', value: 'verisonStatus', text: '版本状态', dictCode: '' })
+      fieldList.push({ type: 'int', value: 'verison', text: '版本号', dictCode: '' })
       this.superFieldList = fieldList
     },
-    loadParameter() {
+    loadParameter () {
       if (this.loadRouteType === false) {
-        this.projectIdx = this.$route.query.project;
+        this.projectIdx = this.$route.query.project
         // console.log('aaaaaaaaa',this.projectIdx)
         // console.log("***********想看看")
-        this.loadRouteType = true;
+        this.loadRouteType = true
       }
     },
-    loadData(arg) {
+    loadData (arg) {
       if (!this.url.list) {
-        this.$message.error("请设置url.list属性!");
+        this.$message.error("请设置url.list属性!")
         return
       }
       //加载数据 若传入参数1则加载第一页的内容
       if (arg === 1) {
-        this.ipagination.current = 1;
+        this.ipagination.current = 1
       }
-      this.loadParameter();
-      var params = this.getQueryParams();//查询条件
-      this.loading = true;
+      this.loadParameter()
+      var params = this.getQueryParams()//查询条件
+      this.loading = true
       getAction(this.url.list, params).then((res) => {
         if (res.success) {
           //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
-          this.dataSource = res.result.records || res.result;
+          this.dataSource = res.result.records || res.result
           if (res.result.total) {
-            this.ipagination.total = res.result.total;
+            this.ipagination.total = res.result.total
           } else {
-            this.ipagination.total = 0;
+            this.ipagination.total = 0
           }
           //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
         } else {
@@ -541,26 +605,26 @@ export default {
         this.loading = false
       })
     },
-    getQueryParams() {
+    getQueryParams () {
       //获取查询条件
       let sqp = {}
       if (this.superQueryParams) {
         sqp['superQueryParams'] = encodeURI(this.superQueryParams)
         sqp['superQueryMatchType'] = this.superQueryMatchType
       }
-      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
-      param.field = this.getQueryField();
-      param.pageNo = this.ipagination.current;
-      param.pageSize = this.ipagination.pageSize;
+      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
+      param.field = this.getQueryField()
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
       //param.id=this.id;
       //!!!!!!!
       // param.projectId = this.$route.query.project;
       // console.log('paaaaaaaaaaaaaaaaaaaaa')
-      return filterObj(param);
+      return filterObj(param)
     },
-    searchReset() {
-      this.queryParam=''
-      this.loadData();
+    searchReset () {
+      this.queryParam = ''
+      this.loadData()
     },
 
   },