wans

src/api/custom/form.js

@@ -154,6 +154,21 @@ export function getTableInfos (parameter) {
     }
   })
 }
+/**
+ * export file
+ * parameter: { }
+ * @param parameter :
+ * @returns {*}
+ */
+export function getTableList (parameter) {
+  return axios({
+    url: `/custom/className?${stringify(parameter)}`,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
 /**
  * export file
  * parameter: { }

src/views/custom/form/modules/component/modules/BatchSelect.vue

@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <a-table :scroll="{x: 1500, y: BaseTool.Constant.scrollY }" :columns="dataColumns" :data-source="dataSource" bordered>
+      <template slot="action" slot-scope="text, record">
+        <a-popconfirm title="确定删除该组件?" ok-text="确定" cancel-text="取消" @confirm="remove(record)">
+          <a>删除</a>
+        </a-popconfirm>
+      </template>
+      <slot name="default">
+
+      </slot>
+      <template slot="title">
+        <div class="title">{{ detail.label }}</div>
+      </template>
+      <template slot="footer">
+        <div class="title">
+          <a-button style="width:200px" type="primary" @click="handleInfoSelect" icon="plus"></a-button>
+        </div>
+      </template>
+    </a-table>
+    <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
+
+  </div>
+</template>
+<script>
+import SelectInfo from './SelectInfo'
+
+export default {
+  components: {
+    SelectInfo,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    detail: {
+      type: Object,
+      required: true,
+    },
+    value: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      dataSource: [],
+      isWatch: true,
+    }
+  },
+  computed: {
+    dataColumns() {
+      return [
+        {
+          title: '序号',
+          dataIndex: 'index',
+          key: 'index',
+          width: 80,
+          customRender: (text, record, index) => `${index + 1}`,
+        },
+        ...this.columns,
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 100,
+          fixed: 'right',
+          align: 'center',
+          key: 'action',
+          scopedSlots: { customRender: 'action' },
+        },
+      ]
+    },
+  },
+  watch: {
+    fileList: {
+      handler(newV, oldV) {
+        this.fileList = newV
+        this.$emit('change', newV)
+      },
+      deep: true,
+      immediate: true,
+    },
+    value: {
+      deep: true,
+      immediate: true,
+      handler: function (newV) {
+        // 数据为空的三种情况
+        if (newV === null || newV === '' || newV === undefined) {
+          this.dataSource = []
+          this.isWatch = true
+          return
+        }
+        if (this.isWatch) {
+          this.isWatch = false
+          if (newV.length > 0) {
+            this.dataSource = newV
+          } else {
+            this.isWatch = true
+          }
+        }
+      },
+    },
+  },
+  methods: {
+    handleInfoSelect() {
+      console.log(this.detail)
+      this.$refs.selectInfo.base(this.detail)
+    },
+    handleInfoSelected(keys, rows, detail) {
+      rows.forEach((item) => {
+        if (!this.dataSource.map((data) => data.id).includes(item.id)) {
+          const newVal = {}
+          newVal.id = item.id
+          this.columns.map((data) => {
+            newVal[data.dataIndex] = item[data.dataIndex]
+          })
+          this.dataSource.push(newVal)
+        }
+      })
+      this.$emit('change', this.dataSource)
+    },
+    remove(record) {
+      this.dataSource = this.dataSource.filter((item) => item.id !== record.id)
+      this.$emit('change', this.dataSource)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>

src/views/custom/form/modules/component/modules/Component.vue

@@ -1,6 +1,16 @@
 <template>
-  <a-col @click="handleSelect" :span="detail.type==='divider'?24:24/config.layout">
-    <a-form-item :label="detail.label" v-if="detail.type!=='divider'">
+  <a-col @click="handleSelect" :span="detail.type==='divider'||detail.type==='batchSelect'?24:24/config.layout">
+    <!-- 分割线 -->
+    <a-divider v-bind="detail.attrs" v-if="detail.type==='divider'">
+      <template v-if="detail.label">
+        {{ detail.label }}
+      </template>
+    </a-divider>
+    <a-form-item :label="detail.label" v-else-if="detail.type==='batchSelect'" :labelCol="{span:0}" :wrapperCol="{span:24}">
+      <!-- 选择数据 -->
+      <BatchSelect v-if="detail.type==='batchSelect'" :detail="detail" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
+    </a-form-item>
+    <a-form-item :label="detail.label" v-else>
       <!-- 输入框 -->
       <a-input v-if="detail.type==='input'" v-bind="detail.attrs" v-decorator="[detail.value, { rules: [{ required: detail.required, message: detail.attrs.placeholder}] }]" />
       <!-- 数字输入框 -->
@@ -26,24 +36,22 @@
         <a-input style="width:70%" v-show="false" v-decorator="[detail.value]" />
         <a-button style="width:30%" type="primary" @click="handleSelectData">选择</a-button>
       </template>
+
     </a-form-item>
-    <!-- 分割线 -->
-    <a-divider v-bind="detail.attrs" v-if="detail.type==='divider'">
-      <template v-if="detail.label">
-        {{ detail.label }}
-      </template>
-    </a-divider>
+
   </a-col>
 </template>
 
 <script>
 import UploadFile from '@/components/Upload/CUploadFile.vue'
 import UploadImg from '@/components/Upload/CUploadImg.vue'
+import BatchSelect from './BatchSelect.vue'
 export default {
   name: 'MComponent',
   components: {
     UploadFile,
     UploadImg,
+    BatchSelect,
   },
   props: {
     detail: {

src/views/custom/form/modules/component/modules/Detail.vue

@@ -78,19 +78,9 @@
       <!-- 选择数据 -->
       <template v-if="model.type === 'dataSelect'">
         <a-form-item label="选择表单">
-          <a-select v-model="model.attrs.dict" placeholder="请选择" :options="DictCache.getChildrenList('TABLE_MAPPING')" @change="dictChange">
+          <a-select v-model="model.attrs.dict" placeholder="请选择" :options="tables" @change="dictChange">
           </a-select>
         </a-form-item>
-        <!-- <a-form-item label="选择类型">
-          <a-radio-group name="radioGroup" v-model="model.attrs.selectType" @change="selectTypeChange">
-            <a-radio value="radio">
-              单选
-            </a-radio>
-            <a-radio value="checkbox">
-              多选
-            </a-radio>
-          </a-radio-group>
-        </a-form-item> -->
         <a-form-item label="默认字段" v-if="model.attrs.connect.length">
           <a-select v-model="model.attrs.connect[1].bind" placeholder="请选择" @change="val=>model.attrs.connect[1].columnName = val">
             <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName">
@@ -107,6 +97,20 @@
           <a-button type="primary" @click="addForm()">添加到表单</a-button>
         </a-form-item> -->
       </template>
+      <!-- 选择数据 -->
+      <template v-if="model.type === 'batchSelect'">
+        <a-form-item label="选择表单">
+          <a-select v-model="model.attrs.dict" placeholder="请选择" :options="tables" @change="dictChange">
+          </a-select>
+        </a-form-item>
+        <a-form-item label="展示字段">
+          <a-select v-model="additionalField" mode="multiple" placeholder="请选择" @change="additionalFieldChange">
+            <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName" :label=" item.columnComment">
+              {{ item.columnComment }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </template>
       <a-popconfirm title="确定删除该组件?" :disabled="!model.isDelete" ok-text="确定" cancel-text="取消" @confirm="deleteModel">
         <a-button type="danger" :disabled="!model.isDelete" style="width:100%">删除</a-button>
       </a-popconfirm>
@@ -132,7 +136,7 @@
 
 <script>
 import { VueDraggable } from 'vue-draggable-plus'
-import { getTableInfos } from '@/api/custom/form'
+import { getTableInfos, getTableList } from '@/api/custom/form'
 import BindTable from './BindTable.vue'
 export default {
   components: {
@@ -160,20 +164,30 @@ export default {
       ],
       tableList: [],
       additionalField: [],
+      tables: [],
     }
   },
   created() {},
   methods: {
     base(val, config) {
+      if (val.id === this.model.id) return
       this.model = val
       this.config = config
       if (this.model.attrs.dict !== undefined && this.model.attrs.dict !== '') {
         this.dictChange(this.model.attrs.dict)
       }
-      // this.additionalField =
-      //   val.attrs.connect && val.attrs.connect.length > 1
-      //     ? val.attrs.connect.slice(1, val.attrs.connect.length).map((item) => item.columnName)
-      //     : []
+      getTableList({ code: 'table' }).then((res) => {
+        this.tables = res.data.map((item) => {
+          return {
+            label: item.title,
+            value: item.titleCode,
+          }
+        })
+      })
+      if (val.type === 'batchSelect') {
+        this.additionalField =
+          val.attrs.columns && val.attrs.columns.length > 1 ? val.attrs.columns.map((item) => item.key) : []
+      }
     },
     addOption() {
       this.model.attrs.options.push({
@@ -195,7 +209,7 @@ export default {
     dictChange(tableName) {
       getTableInfos({ tableName }).then((res) => {
         this.tableList = res.data
-        if (this.model.attrs.connect.length === 0) {
+        if (this.model.type === 'dataSelect' && this.model.attrs.connect.length === 0) {
           this.model.attrs.connect.push({
             bind: this.model.value,
             columnName: 'id',
@@ -217,12 +231,15 @@ export default {
     additionalFieldChange(val, e) {
       const arr = e.map((item) => {
         return {
-          bind: item.key,
-          columnName: item.key,
-          columnComment: item.componentOptions.propsData.label,
+          dataIndex: item.key,
+          key: item.key,
+          title: item.componentOptions.propsData.label,
+          width: 140,
+          align: 'center',
+          ellipsis: true,
         }
       })
-      this.model.attrs.connect.splice(1, this.model.attrs.connect.length - 1, ...arr)
+      this.model.attrs.columns = arr
     },
     addForm() {
       this.$emit('addForm', this.model.attrs.connect.slice(1, this.model.attrs.connect.length))

src/views/custom/form/modules/component/modules/SbInfoSelectModal.vue

@@ -1,19 +1,12 @@
 <template>
-  <a-modal
-    :title="modalTitle"
-    :width="1300"
-    :visible="visible"
-    :confirmLoading="confirmLoading"
-    class="ant-modal2"
-    @cancel="handleCancel"
-  >
+  <a-modal :title="modalTitle" :width="1300" :visible="visible" :confirmLoading="confirmLoading" class="ant-modal2" @cancel="handleCancel">
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
         <a-form layout="inline">
           <a-row :gutter="48">
             <a-col :md="8" :sm="24">
               <a-form-item label="关键字">
-                <a-input v-model.trim="queryParam.keyword" placeholder="请输入名称/编码"/>
+                <a-input v-model.trim="queryParam.keyword" placeholder="请输入名称/编码" />
               </a-form-item>
             </a-col>
             <!--            <a-col :md="8" :sm="24">
@@ -33,26 +26,14 @@
             <a-col :md="6" :sm="24">
               <a-form-item label="车间位置">
                 <a-select v-model="queryParam.positionId" placeholder="请选择">
-                  <a-select-option
-                    v-for="({id,name}) in sbPositionData"
-                    :key="id"
-                    :label="name"
-                    :value="id">{{ name }}
+                  <a-select-option v-for="({id,name}) in sbPositionData" :key="id" :label="name" :value="id">{{ name }}
                   </a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="设备类型">
-                <a-tree-select
-                  style="width: 100%"
-                  :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
-                  :treeData="treeData"
-                  :treeNodeFilterProp="'title'"
-                  :showSearch="true"
-                  placeholder="请选择"
-                  @change="handleChange"
-                >
+                <a-tree-select style="width: 100%" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeData="treeData" :treeNodeFilterProp="'title'" :showSearch="true" placeholder="请选择" @change="handleChange">
                 </a-tree-select>
               </a-form-item>
             </a-col>
@@ -69,18 +50,7 @@
       <div class="table-operator" style="margin-bottom: 8px;">
       </div>
 
-      <s-table
-        ref="table"
-        size="default"
-        rowKey="id"
-        :columns="columns"
-        :data="loadData"
-        :alert="options.alert"
-        :customRow="options.customRow"
-        :rowSelection="options.rowSelection"
-        :scroll="{ x: 1300, y: BaseTool.Constant.scrollY }"
-        showPagination="auto"
-      >
+      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :alert="options.alert" :customRow="options.customRow" :rowSelection="options.rowSelection" :scroll="{ x: 1300, y: BaseTool.Constant.scrollY }" showPagination="auto">
         <span slot="action" slot-scope="record">
           <template>
 
@@ -108,37 +78,35 @@ export default {
   name: 'SbInfoSelectModal',
   components: {
     STable,
-    Ellipsis
+    Ellipsis,
   },
   props: {
     type: {
       type: String,
-      default: 'radio'
+      default: 'radio',
     },
     selectedRowKey: {
       type: Array,
       default: () => {
         return []
-      }
+      },
     },
     selectedRow: {
       type: Array,
       default: () => {
         return []
-      }
-    }
+      },
+    },
   },
-  data () {
+  data() {
     return {
       confirmLoading: false,
       mdl: {},
       modalTitle: null,
       visible: false,
       // 查询参数
-      queryParam: {
-      },
-      extraQueryParam: {
-      },
+      queryParam: {},
+      extraQueryParam: {},
       depreciationTypeMap: {},
       levelMap: {},
       statusMap: {},
@@ -153,22 +121,22 @@ export default {
         {
           title: '设备名称',
           checked: true,
-          dataIndex: 'name'
+          dataIndex: 'name',
         },
         {
           title: '设备编号',
           dataIndex: 'no',
-          checked: true
+          checked: true,
         },
         {
           title: '设备位号',
           checked: true,
-          dataIndex: 'positionNo'
+          dataIndex: 'positionNo',
         },
         {
           title: '型号',
           checked: true,
-          dataIndex: 'model'
+          dataIndex: 'model',
         },
         {
           title: '设备类型',
@@ -177,7 +145,7 @@ export default {
           width: 200,
           customRender: (text, record, index) => {
             return record.typeName
-          }
+          },
         },
         {
           title: '设备等级',
@@ -186,19 +154,19 @@ export default {
           width: 200,
           customRender: (text, record, index) => {
             return this.BaseTool.Object.getField(this.levelMap, text)
-          }
+          },
         },
         {
           title: '状态',
           dataIndex: 'status',
           checked: true,
           width: 200,
-          scopedSlots: { customRender: 'status' }
+          scopedSlots: { customRender: 'status' },
         },
         {
           title: '备注',
           dataIndex: 'remark',
-          width: 200
+          width: 200,
         },
         {
           title: '操作',
@@ -206,11 +174,11 @@ export default {
           width: '200px',
           align: 'center',
           fixed: 'right',
-          scopedSlots: { width: 200, customRender: 'action' }
-        }
+          scopedSlots: { width: 200, customRender: 'action' },
+        },
       ],
       // 加载数据方法 必须为 Promise 对象
-      loadData: parameter => {
+      loadData: (parameter) => {
         parameter = {
           ...parameter,
           ...this.queryParam,
@@ -218,29 +186,33 @@ export default {
           typeList: this.typeList,
           dataScope: {
             sortBy: 'asc',
-            sortName: 'no'
-          }
+            sortName: 'no',
+          },
         }
-        return getSbInfoPage(Object.assign(parameter, this.queryParam))
-          .then(res => {
-            return res.data
-          })
+        return getSbInfoPage(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res.data
+        })
       },
       selectedRowKeys: [],
       selectedRows: [],
 
       options: {
-        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          },
+        },
         rowSelection: {
           selectedRowKeys: this.selectedRowKeys,
-          onChange: this.onSelectChange
-        }
+          onChange: this.onSelectChange,
+        },
       },
       optionAlertShow: true,
-      isCreated: false
+      isCreated: false,
     }
   },
-  created () {
+  created() {
     this.tableOption()
     this.depreciationTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_DEPRECIATIONTYPE)
     this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_LEVEL)
@@ -248,71 +220,77 @@ export default {
     this.unitMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_UNIT)
     this.sourceTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBTYPE_SOURCETYPE)
     this.useTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SB_UES_TYPE)
-    querySbPosition().then(res => {
+    querySbPosition().then((res) => {
       this.sbPositionData = res.data
     })
-    fetchSbTypeTree().then(res => {
+    fetchSbTypeTree().then((res) => {
       this.treeData = res.data
     })
   },
   methods: {
-    tableOption () {
+    tableOption() {
       // this.setTree()
       if (!this.optionAlertShow) {
         this.options = {
-          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
+          alert: {
+            show: true,
+            clear: () => {
+              this.selectedRowKeys = []
+            },
+          },
           rowSelection: {
             selectedRowKeys: this.selectedRowKeys,
             onChange: this.onSelectChange,
             type: this.type,
-            getCheckboxProps: record => ({
+            getCheckboxProps: (record) => ({
               props: {
                 disabled: false,
-                name: record.id
-              }
-            })
+                name: record.id,
+              },
+            }),
           },
           customRow: (record) => {
             return {
-              on: { // 事件
-                click: (event) => { // 点击行
+              on: {
+                // 事件
+                click: (event) => {
+                  // 点击行
                   // 选择对象
                   this.mySelect([record.id], [record])
                 },
                 dblclick: (event) => {
                   this.mySelect([record.id], [record])
                   this.handleSelect()
-                }
-              }
+                },
+              },
             }
-          }
+          },
         }
         this.optionAlertShow = true
       } else {
         this.options = {
           alert: false,
-          rowSelection: null
+          rowSelection: null,
         }
         this.optionAlertShow = false
       }
     },
-    handleOk () {
+    handleOk() {
       // this.setTree()
       this.$refs.table.refresh()
     },
-    onSelectChange (selectedRowKeys, selectedRows) {
+    onSelectChange(selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows
     },
-    resetSearchForm () {
-      this.queryParam = {
-      }
+    resetSearchForm() {
+      this.queryParam = {}
       this.$refs.table.refresh(true)
     },
     /**
      * 设置设备类型树
      */
-    base (record, queryParam = {}) {
+    base(record, queryParam = {}) {
       this.visible = true
       this.modalTitle = '选择设备'
       this.queryParam = queryParam
@@ -327,11 +305,11 @@ export default {
       }
       // this.mySelect(this.selectedRowKeys, this.selectedRows)
     },
-    handleCancel () {
+    handleCancel() {
       this.visible = false
       this.confirmLoading = false
     },
-    handleSelect () {
+    handleSelect() {
       if (this.selectedRowKeys.length === 0) {
         this.$message.warn('请至少选择一项信息')
       } else {
@@ -341,18 +319,18 @@ export default {
         this.visible = false
       }
     },
-    mySelect (selectedRowKeys, selectedRows) {
+    mySelect(selectedRowKeys, selectedRows) {
       this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
       this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
     },
-    handleChange (value, label, extra) {
-      const data = this.treeData.find(item => item.id === value)
+    handleChange(value, label, extra) {
+      const data = this.treeData.find((item) => item.id === value)
       if (data && data.children && data.children.length > 0) {
-        this.typeList = data.children.map(item => item.id)
+        this.typeList = data.children.map((item) => item.id)
       } else {
         this.typeList = [value]
       }
-    }
-  }
+    },
+  },
 }
 </script>

src/views/custom/form/modules/component/modules/SelectInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <StoreSelectModal :type="detail.attrs.selectType" v-if="active === 't_store'" ref="select" @selected="selected"/>
-    <SpareStoreSelectModal :type="detail.attrs.selectType" v-else-if="active === 't_spare_part_info'" ref="select" @selected="selected"/>
+    <StoreSelectModal :type="detail.attrs.selectType" v-if="active === 't_store'" ref="select" @selected="selected" />
+    <SpareStoreSelectModal :type="detail.attrs.selectType" v-else-if="active === 't_spare_part_info'" ref="select" @selected="selected" />
     <SbInfoSelectModal :type="detail.attrs.selectType" v-else-if="active === 't_sb_info'" ref="select" @selected="selected" />
   </div>
 </template>
@@ -14,16 +14,16 @@ export default {
   components: {
     SbInfoSelectModal,
     SpareStoreSelectModal,
-    StoreSelectModal
+    StoreSelectModal,
   },
-  data () {
+  data() {
     return {
       active: '',
-      detail: {}
+      detail: {},
     }
   },
   methods: {
-    base (item) {
+    base(item) {
       if (!item.attrs.dict) {
         this.$message.warning('请配置表单！')
         return
@@ -34,16 +34,13 @@ export default {
         this.$refs.select.base()
       })
     },
-    selected (keys, rows) {
+    selected(keys, rows) {
       this.$emit('selected', keys, rows, this.detail)
-    }
+    },
   },
-  created () {
-
-  }
+  created() {},
 }
 </script>
 
 <style>
-
 </style>

src/views/custom/form/modules/component/modules/components.js

@@ -149,5 +149,27 @@ export const componenHidetList = [
         // }
       ]
     }
+  },
+  {
+    id: 10,
+    name: '批量选择',
+    type: 'batchSelect',
+    value: 'list',
+    dependentId: false,
+    required: true,
+    isDelete:true,
+    label: '批量选择',
+    attrs: {
+      placeholder: '请选择',
+      selectType: 'checkbox',
+      dict: '',
+      columns: [
+        // {
+        //   bind: 'form字段',
+        //   columnName: 'table字段名',
+        //   columnComment: 'table字段值'
+        // }
+      ]
+    }
   }
 ]