【update】-工作组分发 增加成员单位的显示

src/views/projectManagement/modules/WorkGroupDistributeModule.vue

@@ -9,22 +9,36 @@
     @cancel="handleCancel"
     cancelText="关闭">
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form" v-if="memberList[0].children.length > 0">
+
-        <a-row>
+      <template  v-if="dataSourceInit.length > 0">
-          <a-col :span="2"></a-col>
+        <!--    操作按钮区域-->
-          <a-col :span="20">
+        <div class="table-operator">
-            <a-form-item label="成员单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-button type="primary"  @click="checkAll()">全选</a-button>
-              <a-tree
+        </div>
-                :expanded-keys="['0-0']"
+        <a-table
-                :tree-data="memberList"
+          size="middle"
-                :replaceFields="replaceFields"
+          ref="table"
-                checkable
+          bordered
-                @check="onCheck"/>
+          rowKey="id"
-              <a-input style="display: none" v-decorator="['memberName',validatorRules.memberName]"></a-input>
+          :columns="columns"
-            </a-form-item>
+          :dataSource="dataSource"
-          </a-col>
+          :pagination="ipagination"
-        </a-row>
+          :loading="false"
-      </a-form>
+          :scroll="{x: 500}"
+          @change="handleTableChange"
+          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+          class="j-table-force-nowrap main-table">
+
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text }}</template>
+              <div class="table-text">{{ text }}</div>
+            </a-tooltip>
+          </template>
+
+        </a-table>
+      </template>
+
       <a-empty v-else></a-empty>
     </a-spin>
 
@@ -80,39 +94,40 @@ export default {
   data() {
     return {
       title: '分发',
-      width: 500,
+      width: 1000,
       confirmLoading: false,
-      form: this.$form.createForm(this),
+      columns: [
-      labelCol: {
+        {
-        xs: { span: 24 },
+          title: '联系人',
-        sm: { span: 5 }
+          align: 'center',
+          dataIndex: 'name',
+          width: 280,
+          scopedSlots: { customRender: 'text' }
         },
-      wrapperCol: {
+        {
-        xs: { span: 24 },
+          title: '成员单位',
-        sm: { span: 17 }
+          align: 'center',
-      },
+          dataIndex: 'companyName',
-      memberList: [{
+          width: 280,
-        name: '全选',
+          scopedSlots: { customRender: 'text' }
-        children: []
-      }], // 成员树
-      checkedKeys: [], // 已选中的成员数组
-      replaceFields: {
-        children: 'children',
-        title: 'name',
-        value: 'id',
-        key: 'id'
-      },
-      validatorRules: {
-        memberName: {
-          rules: [{ required: true, message: '请选择成员单位' }],
-          validateTrigger: 'change'
         }
+      ],
+      dataSource: [], // 表格中显示的数据
+      dataSourceInit: [], // 所有分发单位的数据
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30', '50', '100'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
         },
-      url: {
+        showQuickJumper: true,
-        memberList: '', // 成员单位列表
+        showSizeChanger: true,
-        distribute: '', // 分发
+        total: 0
-        distributeBatch: '' // 批量分发
+      },
-      }
+      /* table选中keys*/
+      selectedRowKeys: []
     }
   },
   methods: {
@@ -127,7 +142,8 @@ export default {
       }
       distributeMemberList(param).then(res => {
         if (res.success) {
-          this.memberList[0].children = res.result
+          this.dataSourceInit = res.result || []
+          this.loadData(1)
         } else {
           this.$message.warn(res.message)
         }
@@ -143,42 +159,62 @@ export default {
      */
     initData() {
       this.checkedKeys = []
+      this.selectedRowKeys = []
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 10
       this.getMemberList()
+
+    },
+    handleTableChange(pagination) {
+      //分页、排序、筛选变化时触发
+      this.ipagination = pagination
+      this.loadData()
+    },
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+    },
+    getQueryParams() {
+      //获取查询条件
+      let sqp = {}
+      var param = Object.assign(sqp, this.lastQueryParam)
+      param.pageNo = this.ipagination.current
+      param.pageSize = this.ipagination.pageSize
+      return param
+    },
+    loadData(arg) {
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      var params = this.getQueryParams()//查询条件
+      this.ipagination.total = this.dataSourceInit.length
+      this.dataSource = this.dataSourceInit.slice((params.pageNo - 1) * params.pageSize, (params.pageNo * params.pageSize))
+    },
+    checkAll() {
+      this.selectedRowKeys = this.dataSourceInit.map(tt => tt.id)
     },
     close() {
       this.$emit('update:visible', false)
       this.$emit('close')
-      this.memberList = [{
-        name: '全选',
-        children: []
-      }]
     },
     handleOk() {
       if (this.confirmLoading) {
         return
       }
       this.confirmLoading = true
-      if (this.memberList[0].children.length === 0) {
+      if (this.dataSourceInit.length === 0) {
         this.$message.warn('当前工作组暂无成员，无法分发文件')
         this.confirmLoading = false
         return
       }
-      if (this.checkedKeys.length === 0) {
+      if (this.selectedRowKeys.length === 0) {
-        this.form.validateFields()
+        this.$message.warn('请选择成员单位')
         this.confirmLoading = false
         return
       }
-      let str = ''
+
-      if (this.checkedKeys[0] === '0-0') {
-        str = this.checkedKeys.slice(1).join(',').toString()
-      } else {
-        str = this.checkedKeys.join(',').toString()
-      }
-      this.form.setFieldsValue({ memberName: str })
-      this.form.validateFields((err) => {
-        if (!err) {
-          this.confirmLoading = true
       if (this.isBatch) {
+        let str = this.selectedRowKeys.join(',')
         // 批量分发
         const formData = {
           contactsIds: str,
@@ -209,7 +245,7 @@ export default {
       } else {
         // 单个分发
         const formData = {
-              contactsIds: this.checkedKeys.join(','),
+          contactsIds: this.selectedRowKeys.join(','),
           dataId: this.recordId,
           projectId: this.projectId,
           projectType: this.projectType
@@ -234,26 +270,17 @@ export default {
           }, 1000)
         })
       }
-        } else {
+
-          this.confirmLoading = false
-        }
-      })
     },
     handleCancel() {
       this.close()
-    },
-    checkMember(rules, value, callback) {
-      if (this.checkedKeys.length === 0) {
-        callback('请选选择成员')
-      } else {
-        callback()
-      }
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+@import '~@assets/less/common.less';
 .no-upload {
   /deep/ .ant-upload-select-text {
     display: none;
@@ -279,4 +306,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/deep/ .ant-table-body {
+  overflow-x: auto !important;
+}
 </style>