From 10f894483e1e41fc141964d2da30759d4599407e Mon Sep 17 00:00:00 2001
From: caoyizhong <1270296080>
Date: Tue, 15 Nov 2022 11:55:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=A1=E6=A0=B8=E4=BA=BA?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=97=AE=E9=A2=98=E6=98=BE=E7=A4=BA=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jeecgbiz/modal/JSelectUserByDepModal.vue  |   4 +-
 src/views/activiti/PSelectBizComponent.vue    | 195 ++++++++
 .../activiti/PSelectBizComponentModal.vue     | 464 ++++++++++++++++++
 src/views/activiti/PSelectPosition.vue        |  10 +-
 src/views/activiti/ProcessModelList.vue       |  13 +-
 5 files changed, 676 insertions(+), 10 deletions(-)
 create mode 100644 src/views/activiti/PSelectBizComponent.vue
 create mode 100644 src/views/activiti/PSelectBizComponentModal.vue

diff --git a/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue b/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
index 1bc6990..d535f15 100644
--- a/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
+++ b/src/components/jeecgbiz/modal/JSelectUserByDepModal.vue
@@ -183,9 +183,9 @@
         }
         if (this.selectedDepIds && this.selectedDepIds.length > 0) {
           await this.initQueryUserByDepId(this.selectedDepIds)
-          console.log("这边1");
+          // console.log("这边1");
         } else {
-          console.log("这边2");
+          // console.log("这边2");
           this.loading = true
           let params = this.getQueryParams()//查询条件
           await getUserList(params).then((res) => {
diff --git a/src/views/activiti/PSelectBizComponent.vue b/src/views/activiti/PSelectBizComponent.vue
new file mode 100644
index 0000000..d118f34
--- /dev/null
+++ b/src/views/activiti/PSelectBizComponent.vue
@@ -0,0 +1,195 @@
+<template>
+  <a-row class="j-select-biz-component-box" type="flex" :gutter="8">
+    <a-col :class="{'full': !buttons}">
+      <slot name="left">
+        <a-select
+          mode="multiple"
+          :placeholder="placeholder"
+          v-model="selectValue"
+          :options="selectOptions"
+          allowClear
+          :disabled="disabled"
+          :open="selectOpen"
+          style="width: 100%;"
+          @dropdownVisibleChange="handleDropdownVisibleChange"
+          @click.native="visible=(buttons || disabled ?visible:true)"
+        />
+      </slot>
+    </a-col>
+
+    <a-col v-if="buttons" class="right">
+      <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
+    </a-col>
+
+    <PSelectBizComponentModal
+      v-model="selectValue"
+      :visible.sync="visible"
+      v-bind="modalProps"
+      @options="handleOptions"
+    />
+  </a-row>
+</template>
+
+<script>
+import PSelectBizComponentModal from './PSelectBizComponentModal'
+import { queryUserByDepId } from '@api/api'
+
+export default {
+  name: 'PSelectBizComponent',
+  components: { PSelectBizComponentModal },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    /** 是否返回 id，默认 false，返回 code */
+    returnId: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否支持多选，默认 true
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示按钮，默认 true
+    buttons: {
+      type: Boolean,
+      default: true
+    },
+    // 显示的 Key
+    displayKey: {
+      type: String,
+      default: null
+    },
+    // 返回的 key
+    returnKeys: {
+      type: Array,
+      default: () => ['id', 'id']
+    },
+    // 选择按钮文字
+    selectButtonText: {
+      type: String,
+      default: '选择'
+    },
+
+  },
+  data() {
+    return {
+      selectedDepIds: [],
+      departTree: [],
+      expandedKeys: [],
+      selectValue: [],
+      selectOptions: [],
+      dataSourceMap: {},
+      visible: false,
+      selectOpen: false,
+    }
+  },
+  computed: {
+    valueKey() {
+      return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
+    },
+    modalProps() {
+      return Object.assign({
+        valueKey: this.valueKey,
+        multiple: this.multiple,
+        returnKeys: this.returnKeys,
+        displayKey: this.displayKey || this.valueKey
+      }, this.$attrs)
+    },
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.selectValue = val.split(',')
+        } else {
+          this.selectValue = []
+        }
+      }
+    },
+    selectValue: {
+      deep: true,
+      handler(val) {
+        let rows = val.map(key => this.dataSourceMap[key])
+        let data = val.join(',')
+        if (data !== this.value) {
+          this.$emit('select', rows)
+          this.$emit('input', data)
+          this.$emit('change', data)
+        }
+      }
+    }
+  },
+  methods: {
+
+    // 点击树节点,筛选出对应的用户
+    onDepSelect(selectedDepIds) {
+      if (selectedDepIds[0] != null) {
+        this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
+        if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+          this.selectedDepIds = [selectedDepIds[0]];
+        }
+      }
+    },
+    // 根据选择的id来查询用户信息
+    initQueryUserByDepId(selectedDepIds) {
+      this.loading = true
+      return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
+        if (res.success) {
+          this.dataSource = res.result;
+          this.ipagination.total = res.result.length;
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
+
+    handleOptions(options, dataSourceMap) {
+      this.selectOptions = options
+      this.dataSourceMap = dataSourceMap
+    },
+    handleDropdownVisibleChange() {
+      // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
+      this.selectOpen = true
+      this.$nextTick(() => {
+        this.selectOpen = false
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.j-select-biz-component-box {
+
+  @width: 82px;
+
+  .left {
+    width: calc(100% - @width - 8px);
+  }
+
+  .right {
+    width: @width;
+  }
+
+  .full {
+    width: 100%;
+  }
+
+  /deep/ .ant-select-search__field {
+    display: none !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/activiti/PSelectBizComponentModal.vue b/src/views/activiti/PSelectBizComponentModal.vue
new file mode 100644
index 0000000..15e86e4
--- /dev/null
+++ b/src/views/activiti/PSelectBizComponentModal.vue
@@ -0,0 +1,464 @@
+<template>
+  <j-modal
+    centered
+    :title="name + '选择'"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="close"
+    cancelText="关闭">
+
+    <a-row :gutter="18">
+      <a-col :md="6" :sm="24">
+        <a-card>
+          <!--组织机构-->
+          <a-directory-tree
+            selectable
+            :selectedKeys="selectedDepIds"
+            :checkStrictly="true"
+            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
+            :treeData="departTree"
+            :expandAction="false"
+            :expandedKeys.sync="expandedKeys"
+            @select="onDepSelect"
+          />
+        </a-card>
+      </a-col>
+
+
+      <a-col :span="10">
+        <!-- 查询区域 -->
+        <a-form layout="inline" class="j-inline-form">
+          <!-- 固定条件 -->
+          <a-form-item :label="(queryParamText||name)">
+            <a-input v-model="queryParam[queryParamCode||valueKey]" :placeholder="'请输入' + (queryParamText||name)" @pressEnter="searchQuery"/>
+          </a-form-item>
+          <!-- 动态生成的查询条件 -->
+          <j-select-biz-query-item v-if="queryConfig.length>0" v-show="showMoreQueryItems" :queryParam="queryParam" :queryConfig="queryConfig" @pressEnter="searchQuery"/>
+          <!-- 按钮 -->
+          <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+          <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+          <a v-if="queryConfig.length>0" @click="showMoreQueryItems=!showMoreQueryItems" style="margin-left: 8px">
+            {{ showMoreQueryItems ? '收起' : '展开' }}
+            <a-icon :type="showMoreQueryItems ? 'up' : 'down'"/>
+          </a>
+        </a-form>
+
+        <a-table
+          size="middle"
+          bordered
+          :rowKey="rowKey"
+          :columns="innerColumns"
+          :dataSource="dataSource"
+          :pagination="ipagination"
+          :loading="loading"
+          :scroll="{ y: 640 }"
+          :rowSelection="{selectedRowKeys, onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
+          :customRow="customRowFn"
+          @change="handleTableChange">
+        </a-table>
+
+      </a-col>
+      <a-col :span="8">
+        <a-card :title="'已选' + name" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
+
+          <a-table size="middle" :rowKey="rowKey" bordered v-bind="selectedTable"  :scroll="{ y: 600 }">
+              <span slot="action" slot-scope="text, record, index">
+                <a @click="handleDeleteSelected(record, index)">删除</a>
+              </span>
+          </a-table>
+
+        </a-card>
+      </a-col>
+    </a-row>
+  </j-modal>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import Ellipsis from '@/components/Ellipsis'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { cloneObject, pushIfNotExist } from '@/utils/util'
+import { getUserList, queryDepartTreeList, queryUserByDepId } from '@api/api'
+
+
+export default {
+  name: 'PSelectBizComponentModal',
+  mixins: [JeecgListMixin],
+  components: {Ellipsis, },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    valueKey: {
+      type: String,
+      required: true
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: Number,
+      default: 900
+    },
+
+    name: {
+      type: String,
+      default: ''
+    },
+    listUrl: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    // 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
+    valueUrl: {
+      type: String,
+      default: ''
+    },
+    displayKey: {
+      type: String,
+      default: null
+    },
+    columns: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    // 查询条件Code
+    queryParamCode: {
+      type: String,
+      default: null
+    },
+    // 查询条件文字
+    queryParamText: {
+      type: String,
+      default: null
+    },
+    // 查询配置
+    queryConfig: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    // 过长裁剪长度，设置为 -1 代表不裁剪
+    ellipsisLength: {
+      type: Number,
+      default: 12
+    },
+  },
+  data() {
+    return {
+      selectedDepIds: [],
+      departTree: [],
+      expandedKeys: [],
+      innerValue: [],
+      // 已选择列表
+      selectedTable: {
+        pagination: false,
+        scroll: { y: 240 },
+        columns: [
+          {
+            ...this.columns[0],
+            width: this.columns[0].widthRight || this.columns[0].width,
+          },
+          { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
+        ],
+        dataSource: [],
+      },
+      renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
+      url: { list: this.listUrl },
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      options: [],
+      dataSourceMap: {},
+      showMoreQueryItems: false,
+    }
+  },
+  created() {
+    this.queryDepartTree();
+  },
+  computed: {
+    // 表头
+    innerColumns() {
+      let columns = cloneObject(this.columns)
+      columns.forEach(column => {
+        // 给所有的列加上过长裁剪
+        if (this.ellipsisLength !== -1) {
+          column.customRender = (text) => this.renderEllipsis(text)
+        }
+      })
+      return columns
+    },
+  },
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.innerValue = cloneObject(val)
+        this.selectedRowKeys = []
+        this.valueWatchHandler(val)
+        this.queryOptionsByValue(val)
+      }
+    },
+    dataSource: {
+      deep: true,
+      handler(val) {
+        this.emitOptions(val)
+        this.valueWatchHandler(this.innerValue)
+      }
+    },
+    selectedRowKeys: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        //update--begin--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
+        if(this.innerValue){
+          this.innerValue.length=0;
+        }
+        //update--end--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
+        this.selectedTable.dataSource = val.map(key => {
+          for (let data of this.dataSource) {
+            if (data[this.rowKey] === key) {
+              pushIfNotExist(this.innerValue, data[this.valueKey])
+              return data
+            }
+          }
+          for (let data of this.selectedTable.dataSource) {
+            if (data[this.rowKey] === key) {
+              pushIfNotExist(this.innerValue, data[this.valueKey])
+              return data
+            }
+          }
+          console.warn('未找到选择的行信息，key：' + key)
+          return {}
+        })
+      },
+    }
+  },
+
+  methods: {
+
+    // 点击树节点,筛选出对应的用户
+    onDepSelect(selectedDepIds) {
+      // console.log("selectedDepIds",selectedDepIds)
+      if (selectedDepIds[0] != null) {
+        this.initQueryUserByDepId(selectedDepIds); // 调用方法根据选选择的id查询用户信息
+        if (this.selectedDepIds[0] !== selectedDepIds[0]) {
+          this.selectedDepIds = [selectedDepIds[0]];
+        }
+      }
+    },
+    // 根据选择的id来查询用户信息
+    initQueryUserByDepId(selectedDepIds) {
+      // this.loading = true
+      return queryUserByDepId({id: selectedDepIds.toString()}).then((res) => {
+        // console.log("initQueryUserByDepId",res)
+        if (res.success) {
+          this.dataSource = res.result;
+          this.ipagination.total = res.result.length;
+        }
+      }).finally(() => {
+        // this.loading = false
+      })
+    },
+
+    queryDepartTree() {
+      queryDepartTreeList().then((res) => {
+        console.log("234q32423",res)
+        if (res.success) {
+          this.departTree = res.result;
+          // 默认展开父节点
+          this.expandedKeys = this.departTree.map(item => item.id)
+        }
+      })
+    },
+
+    handleTableChange(pagination, filters, sorter) {
+      //TODO 筛选
+      if (Object.keys(sorter).length > 0) {
+        this.isorter.column = sorter.field;
+        this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
+      }
+      this.ipagination = pagination;
+      this.loadData();
+    },
+
+    async loadData(arg) {
+      if (arg === 1) {
+        this.ipagination.current = 1;
+      }
+      if (this.selectedDepIds && this.selectedDepIds.length > 0) {
+        await this.initQueryUserByDepId(this.selectedDepIds)
+        // console.log("这边1");
+      } else {
+        // console.log("这边2");
+        this.loading = true
+        let params = this.getQueryParams()//查询条件
+        await getUserList(params).then((res) => {
+          if (res.success) {
+            this.dataSource = res.result.records
+            this.ipagination.total = res.result.total
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      }
+    },
+
+
+    /** 关闭弹窗 */
+    close() {
+      this.$emit('update:visible', false)
+    },
+
+    valueWatchHandler(val) {
+      val.forEach(item => {
+        this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
+          if (data[this.valueKey] === item) {
+            pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
+          }
+        })
+      })
+    },
+
+    queryOptionsByValue(value) {
+      if (!value || value.length === 0) {
+        return
+      }
+      // 判断options是否存在value，如果已存在数据就不再请求后台了
+      let notExist = false
+      for (let val of value) {
+        let find = false
+        for (let option of this.options) {
+          if (val === option.value) {
+            find = true
+            break
+          }
+        }
+        if (!find) {
+          notExist = true
+          break
+        }
+      }
+      if (!notExist) return
+      getAction(this.valueUrl || this.listUrl, {
+        // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
+        [this.valueKey]: value.join(',') + ',',
+        pageNo: 1,
+        pageSize: value.length
+      }).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          if (!(dataSource instanceof Array)) {
+            dataSource = res.result.records
+          }
+          this.emitOptions(dataSource, (data) => {
+            pushIfNotExist(this.innerValue, data[this.valueKey])
+            pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
+            pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
+          })
+        }
+      })
+    },
+
+    emitOptions(dataSource, callback) {
+      dataSource.forEach(data => {
+        let key = data[this.valueKey]
+        this.dataSourceMap[key] = data
+        pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
+        typeof callback === 'function' ? callback(data) : ''
+      })
+      this.$emit('options', this.options, this.dataSourceMap)
+    },
+
+    /** 完成选择 */
+    handleOk() {
+      let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
+      this.$emit('input', value)
+      this.close()
+    },
+    /** 删除已选择的 */
+    handleDeleteSelected(record, index) {
+      this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
+      //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
+      this.selectedTable.dataSource.splice(this.selectedTable.dataSource.indexOf(record), 1)
+      this.innerValue.splice(this.innerValue.indexOf(record[this.valueKey]), 1)
+      console.log("this.selectedRowKeys:",this.selectedRowKeys)
+      console.log("this.selectedTable.dataSource:",this.selectedTable.dataSource)
+      //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
+    },
+
+    customRowFn(record) {
+      return {
+        on: {
+          click: () => {
+            let key = record[this.rowKey]
+            if (!this.multiple) {
+              this.selectedRowKeys = [key]
+              this.selectedTable.dataSource = [record]
+            } else {
+              let index = this.selectedRowKeys.indexOf(key)
+              if (index === -1) {
+                this.selectedRowKeys.push(key)
+                this.selectedTable.dataSource.push(record)
+              } else {
+                this.handleDeleteSelected(record, index)
+              }
+            }
+          }
+        }
+      }
+    },
+
+  }
+}
+</script>
+<style lang="less" scoped>
+.full-form-item {
+  display: flex;
+  margin-right: 0;
+
+  /deep/ .ant-form-item-control-wrapper {
+    flex: 1 1;
+    display: inline-block;
+  }
+}
+
+.j-inline-form {
+  /deep/ .ant-form-item {
+    margin-bottom: 12px;
+  }
+
+  /deep/ .ant-form-item-label {
+    line-height: 32px;
+    width: auto;
+  }
+
+  /deep/ .ant-form-item-control {
+    height: 32px;
+    line-height: 32px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/activiti/PSelectPosition.vue b/src/views/activiti/PSelectPosition.vue
index ff9295a..6f6c5cc 100644
--- a/src/views/activiti/PSelectPosition.vue
+++ b/src/views/activiti/PSelectPosition.vue
@@ -1,5 +1,5 @@
 <template>
-  <j-select-biz-component
+  <PSelectBizComponent
     :value="value"
     :ellipsisLength="20"
     :listUrl="url.list"
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import JSelectBizComponent from '@/components/jeecgbiz/JSelectBizComponent'
+import PSelectBizComponent from './PSelectBizComponent'
 
 export default {
   name: 'PSelectPosition',
-  components: { JSelectBizComponent },
+  components: { PSelectBizComponent },
   props: ['value'],
   data() {
     return {
@@ -29,9 +29,9 @@ export default {
         { title: '部门', dataIndex: 'orgCodeTxt', align: 'center', width: '25%' }
       ],
       default:{
-        name: '人员名称',
+        name: '人员',
         displayKey: 'realname',
-        width: 1200,
+        width: 1500,
         returnKeys: ['realname', 'id'],
       }
     }
diff --git a/src/views/activiti/ProcessModelList.vue b/src/views/activiti/ProcessModelList.vue
index d34f345..39e8924 100644
--- a/src/views/activiti/ProcessModelList.vue
+++ b/src/views/activiti/ProcessModelList.vue
@@ -47,8 +47,12 @@
           </span>
 
         </a-row>
+
       </a-form>
     </div>
+    <div class="table-operator">
+      <a-button @click="shuttle" type="primary" icon="plus">新增</a-button>
+    </div>
 
 
     <!-- table区域-begin -->
@@ -130,7 +134,7 @@
 <!--          <a-divider type="vertical" />-->
          <!-- <a href="javascript:void(0);" @click="convertToModel(r)" >转为模型</a>-->
          <!-- <br>-->
-          <a href="javascript:void(0);"  @click="edit(r)">配置表单</a> <a-divider type="vertical" />
+          <a href="javascript:void(0);"  @click="edit(r)">编辑</a> <a-divider type="vertical" />
           <a href="javascript:void(0);" style="color: red;" @click="remove(r)">删除</a>
 
 
@@ -141,7 +145,7 @@
     <!--编辑-->
     <a-modal  width="900px"
       :confirmLoading="confirmLoading"
-      title="编辑流程"
+      :title=textbox
       :visible="editObj.visible"
       @ok="editObjOk"
       @cancel="editObj.visible = false"
@@ -341,6 +345,7 @@
     },
     data () {
       return {
+        textbox:'',
         reportList:[],
         viewImage:false,
         viewTitle:"",
@@ -424,7 +429,7 @@
     methods: {
 
       shuttle(){
-        this.isShuttle = true;
+        this.editObj.visible = true;
       },
 
 
@@ -613,6 +618,8 @@
       },
       /*编辑流程信息*/
       edit(row){
+        console.log(row)
+        this.textbox = "编辑"+row.description;
         this.editObj = Object.assign(this.editObj, row)
         this.editObj.visible = true;
       },