客户选择组件

src/api/sys/WorkClientService.js

@@ -8,6 +8,20 @@ export default class WorkClientService {
       params: param
     })
   }
+  componentList (param) {
+    return request({
+      url: '/workClientInfo/workClientInfo/componentList',
+      method: 'get',
+      params: param
+    })
+  }
+  componentById (id) {
+    return request({
+      url: '/workClientInfo/workClientInfo/componentById',
+      method: 'get',
+      params: {id: id}
+    })
+  }
   save (param) {
     return request({
       url: '/workClientInfo/workClientInfo/save',

src/components/workClientInfoSelect/WorkClientInfoSelectDialog.vue

@@ -0,0 +1,308 @@
+<template>
+  <div>
+    <el-dialog
+    title="客户选择"
+    width="1000px"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+     v-dialogDrag
+     class="clientDialog"
+    :visible.sync="visible">
+    <el-container style="height: 500px">
+      <el-header style="text-align: left; font-size: 12px;height:30px">
+        <el-form size="small" :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
+            <el-form-item prop="name">
+              <el-input size="small" v-model="searchForm.name" placeholder="客户姓名" clearable></el-input>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
+              <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
+            </el-form-item>
+          </el-form>
+      </el-header>
+
+      <el-main>
+        <el-table
+          :data="dataList"
+          v-loading="loading"
+          size="small"
+          border
+          ref="clientTable"
+          @selection-change="selectionChangeHandle"
+          @sort-change="sortChangeHandle"
+          height="calc(100% - 40px)"
+          style="width: 100%;">
+          <el-table-column
+            header-align="center"
+            align="center"
+            width="50">
+              <template slot-scope="scope">
+                  <el-radio :label="scope.row.id" :value="dataListAllSelections[0]&&dataListAllSelections[0].id" @change.native="getTemplateRow(scope.$index,scope.row)"><span></span></el-radio>
+              </template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            header-align="center"
+            align="center"
+            label="客户姓名">
+          </el-table-column>
+          <el-table-column
+            prop="uscCode"
+            header-align="center"
+            align="center"
+            label="统一社会信用代码">
+          </el-table-column>
+          <el-table-column
+            prop="areaName"
+            header-align="center"
+            align="center"
+            label="归属区域">
+          </el-table-column>
+          <el-table-column
+            prop="companyType"
+            header-align="center"
+            align="center"
+            label="客户性质">
+            <template scope="scope">
+              {{ $dictUtils.getDictLabel("customer_nature", scope.row.companyType, '-') }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="companyIndustry"
+            header-align="center"
+            align="center"
+            label="所在行业">
+            <template scope="scope">
+              {{ $dictUtils.getDictLabel("industry", scope.row.companyIndustry, '-') }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          @size-change="sizeChangeHandle"
+          @current-change="currentChangeHandle"
+          :current-page="pageNo"
+          :page-sizes="[5, 10, 50, 100]"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </el-main>
+</el-container>
+     <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
+      <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
+    </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        searchForm: {
+          name: ''
+        },
+        filterText: '',
+        dataListAllSelections: [],   // 所有选中的数据包含跨页数据
+        dataListSelections: [],
+        idKey: 'id', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
+        dataList: [],
+        dynamicTags: [],
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+        orders: [],
+        loading: false,
+        visible: false
+      }
+    },
+    props: {
+      selectData: {
+        type: Array,
+        default: () => { return [] }
+      }
+    },
+    watch: {
+    },
+    methods: {
+      init () {
+        this.visible = true
+        this.$nextTick(() => {
+          this.dataListAllSelections = JSON.parse(JSON.stringify(this.selectData))
+          this.resetSearch()
+        })
+      },
+      getTemplateRow (index, row) { // 获取选中数据
+        this.dataListSelections = [row]
+        this.$nextTick(() => {
+          this.changePageCoreRecordData()
+        })
+      },
+           // 设置选中的方法
+      setSelectRow () {
+        if (!this.dataListAllSelections || this.dataListAllSelections.length <= 0) {
+          this.$refs.clientTable.clearSelection()
+          return
+        }
+                // 标识当前行的唯一键的名称
+        let idKey = this.idKey
+        let selectAllIds = []
+        this.dataListAllSelections.forEach(row => {
+          selectAllIds.push(row[idKey])
+        })
+        this.$refs.clientTable.clearSelection()
+        for (var i = 0; i < this.dataList.length; i++) {
+          if (selectAllIds.indexOf(this.dataList[i][idKey]) >= 0) {
+                        // 设置选中，记住table组件需要使用ref="table"
+            this.$refs.clientTable.toggleRowSelection(this.dataList[i], true)
+          }
+        }
+      },
+            // 记忆选择核心方法
+      changePageCoreRecordData () {
+                // 标识当前行的唯一键的名称
+        let idKey = this.idKey
+        let that = this
+              // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
+        if (this.dataListAllSelections.length <= 0) {
+          this.dataListSelections.forEach(row => {
+            that.dataListAllSelections.push(row)
+          })
+          return
+        }
+                // 总选择里面的key集合
+        let selectAllIds = []
+        this.dataListAllSelections.forEach(row => {
+          selectAllIds.push(row[idKey])
+        })
+        let selectIds = []
+                // 获取当前页选中的id
+        this.dataListSelections.forEach(row => {
+          selectIds.push(row[idKey])
+                  // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
+          if (selectAllIds.indexOf(row[idKey]) < 0) {
+            that.dataListAllSelections.push(row)
+          }
+        })
+        let noSelectIds = []
+              // 得到当前页没有选中的id
+        this.dataList.forEach(row => {
+          if (selectIds.indexOf(row[idKey]) < 0) {
+            noSelectIds.push(row[idKey])
+          }
+        })
+        noSelectIds.forEach(id => {
+          if (selectAllIds.indexOf(id) >= 0) {
+            for (let i = 0; i < that.dataListAllSelections.length; i++) {
+              if (that.dataListAllSelections[i][idKey] === id) {
+                                // 如果总选择中有未被选中的，那么就删除这条
+                that.dataListAllSelections.splice(i, 1)
+                break
+              }
+            }
+          }
+        })
+      },
+     // 得到选中的所有数据
+      getAllSelectionData () {
+         // 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据
+        this.changePageCoreRecordData()
+      },
+      // 获取数据列表
+      refreshList () {
+        this.loading = true
+        this.$http({
+          url: '/workClientInfo/workClientInfo/componentList',
+          method: 'get',
+          params: {
+            'current': this.pageNo,
+            'size': this.pageSize,
+            'orders': this.orders,
+            ...this.searchForm
+          }
+        }).then(({data}) => {
+          this.dataList = data.records
+          this.total = data.total
+          this.pageNo = data.current
+          this.loading = false
+          this.$nextTick(() => {
+            this.setSelectRow()
+          })
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageNo = 1
+        this.refreshList()
+        this.$nextTick(() => {
+          this.changePageCoreRecordData()
+        })
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageNo = val
+        this.refreshList()
+        this.$nextTick(() => {
+          this.changePageCoreRecordData()
+        })
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+        this.$nextTick(() => {
+          this.changePageCoreRecordData()
+        })
+      },
+       // 排序
+      sortChangeHandle (column) {
+        this.orders = []
+        if (column.order != null) {
+          this.orders.push({column: this.$utils.toLine(column.prop), asc: column.order === 'ascending'})
+        }
+        this.refreshList()
+      },
+      handleNodeClick (data) {
+        this.refreshList()
+      },
+      resetSearch () {
+        this.$refs.searchForm.resetFields()
+        this.refreshList()
+      },
+      doSubmit () {
+        this.visible = false
+        this.$emit('doSubmit', this.dataListAllSelections)
+      }
+    }
+  }
+</script>
+<style lang="scss">
+.org {
+  height: 100%;
+  .el-card__header {
+    padding: 10px;
+  }
+  .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+}
+.clientDialog{
+  .el-dialog__body {
+    padding: 10px 0px 0px 10px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+  }
+  .el-main {
+    padding: 20px 20px 5px 20px;
+    .el-pagination{
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/components/workClientInfoSelect/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <el-input  placeholder="请选择" :size="size" :disabled="disabled"  :readonly="true" style="line-hight:40px;width: 100%" v-model="name" class="input-with-select">
+      <el-button slot="append" :disabled="disabled"  :readonly="readonly" @click="openClient">查询</el-button>
+    </el-input>
+    <work-client-info-select-dialog ref="workClientInfoSelect" @doSubmit="selectClientToInput" :selectData="selectData"></work-client-info-select-dialog>
+  </div>
+</template>
+<script>
+  import WorkClientInfoSelectDialog from './WorkClientInfoSelectDialog'
+  import WorkClientService from '@/api/sys/WorkClientService'
+  export default {
+    data () {
+      return {
+        name: '',
+        labelValue: this.value,
+        selectData: [],
+        rosterData: []
+      }
+    },
+    props: {
+      limit: Number,
+      value: String,
+      size: {
+        type: String,
+        default: () => { return 'small' }
+      },
+      readonly: {
+        type: Boolean,
+        default: () => { return false }
+      },
+      disabled: {
+        type: Boolean,
+        default: () => { return false }
+      }
+    },
+    components: {
+      WorkClientInfoSelectDialog
+    },
+    workClientService: null,
+    beforeCreate () {
+      this.workClientService = new WorkClientService()
+    },
+    watch: {
+      value: {
+        handler (newVal) {
+          this.selectData = []
+          if (newVal) {
+            newVal.split(',').forEach((id) => {
+              this.workClientService.componentById(id).then(({data}) => {
+                if (data && data.id !== '') {
+                  this.selectData.push(data)
+                }
+              })
+            })
+          }
+        },
+        immediate: true,
+        deep: false
+      },
+      selectData: {
+        handler (newVal) {
+          this.name = newVal.map(client => { return client.name }).join(',')
+        },
+        immediate: false,
+        deep: false
+      }
+    },
+    methods: {
+      selectClientToInput (clientList) {
+        this.selectData = clientList
+        this.labelValue = clientList.map(client => { return client.id }).join(',')
+        this.name = clientList.map(client => { return client.name }).join(',')
+        this.$emit('getValue', this.labelValue, this.name)
+      },
+      openClient () {
+        this.$refs.workClientInfoSelect.init()
+      }
+    }
+  }
+</script>
+<style>
+  .el-form-item__content .el-input-group {
+    vertical-align: middle;
+  }
+  .el-tag + .el-tag {
+    margin-left: 5px;
+    margin-bottom: 5px;
+  }
+</style>
+
+

src/views/modules/sys/workClient/WorkClientList.vue

@@ -25,6 +25,7 @@
 
         <el-form-item label="创建时间" prop="createDates">
           <el-date-picker
+            placement="bottom-start"
             v-model="searchForm.createDates"
             type="datetimerange"
             range-separator="至"

src/views/modules/sys/workContract/WorkContractForm.vue

@@ -3,38 +3,19 @@
     <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
              label-width="150px">
       <el-row  :gutter="0">
-        <el-col :span="10">
-          <el-form-item label="客户名称" prop="clientName" :rules="[
-                {required: true, message:'请输入客户名称', trigger:'blur'}
+        <el-col :span="12">
+          <el-form-item label="客户名称" prop="clientId" :rules="[
+                {required: true, message:'请输入客户名称', trigger:'blur'},
+                {required: true, message:'请输入客户名称', trigger:'change'}
               ]">
-            <el-input v-model="inputForm.clientName" placeholder="请输入客户名称"></el-input>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="2">
-          <el-popover
-            v-model="visable"
-            placement="left"
-            width="400"
-            height="800"
-            trigger="click"
-            :popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
-            ref="pops">
-            <vxe-table
-              border="inner"
-              auto-resize
-              resizable
-              :row-config="{isHover: true}"
-              :data="gridData"
-              :checkbox-config="{}"
-              :row-style="rowStyle"
-              @cell-click="rowClick"
-              :show-header="false"
+            <work-client-select
+              :size="'medium'"
+              :value="inputForm.clientId"
+              :disabled="method==='view'"
+              @getValue='(clientId,clientName) => {inputForm.clientId=clientId;inputForm.clientName=clientName}'
             >
-              <vxe-column title="" field="name" ></vxe-column>
-            </vxe-table>
-            <el-button type="info" slot="reference" @click="getPopTable" style="width: 100%" plain>查询</el-button>
-          </el-popover>
+            </work-client-select>
+          </el-form-item>
         </el-col>
 
         <el-col :span="12">
@@ -56,6 +37,7 @@
                 {required: true, message:'请输入签订日期', trigger:'blur'}
                ]">
             <el-date-picker
+              placement="bottom-start"
               v-model="inputForm.contractDate"
               type="date"
               style="width: 100%"
@@ -70,6 +52,7 @@
                  {required: true, message:'请输入合同生效日期', trigger:'blur'}
                ]">
             <el-date-picker
+              placement="bottom-start"
               v-model="inputForm.effectiveDate"
               type="date"
               style="width: 100%"
@@ -84,6 +67,7 @@
                 {required: true, message:'请选择合同终止日期', trigger:'blur'}
               ]">
             <el-date-picker
+              placement="bottom-start"
               v-model="inputForm.closingDate"
               type="date"
               style="width: 100%"
@@ -246,6 +230,7 @@
 <script>
   import WorkContractService from '@/api/sys/WorkContractService'
   import WorkClientService from '@/api/sys/WorkClientService'
+  import WorkClientSelect from '@/components/workClientInfoSelect'
   import OSSSerive, {
     httpRequest,
     toHref,
@@ -333,7 +318,8 @@
       }
     },
     components: {
-      ElImageViewer
+      ElImageViewer,
+      WorkClientSelect
     },
     ossService: null,
     workContractService: null,

src/views/modules/sys/workContract/WorkContractList.vue

@@ -12,6 +12,7 @@
 
         <el-form-item label="签订日期" prop="contractDates">
           <el-date-picker
+            placement="bottom-start"
             v-model="searchForm.contractDates"
             type="datetimerange"
             range-separator="至"