[add] 绑定零部件

2024-04-15 18:09:09 +08:00
parent afdb1ca0fd
commit b13c9fe5b8
8 changed files with 1199 additions and 0 deletions
@@ -0,0 +1,143 @@
+<template>
+  <div class="selection-wrapper">
+    <div class="box-title-text">
+      <a-input class="box-input"
+               :value="nameStr || value"
+               :title="value"
+               disabled
+               :max-length="500"
+               :placeholder="placeholder">
+
+        <a-icon v-if="(nameStr || value) && !disabled" slot="suffix" class="close-icon" type="close-circle" theme="filled" @click="clearInput" />
+      </a-input>
+      <a-button v-if="!disabled" type="primary" class="button-box" @click="clauseClick">
+        {{ $t('clauseSelect.selectClause') }}
+      </a-button>
+    </div>
+    <clause-selection-modal ref="clauseSelectionModal"
+                            v-bind="$attrs"
+                            :value="value"
+                            :standard-id="standardId"
+                            @change="modalInput"
+                            @nameChange="modalNameChange"
+                            @listChange="modalListChange"></clause-selection-modal>
+  </div>
+</template>
+
+<script>
+import ClauseSelectionModal from './ClauseSelectionModal'
+
+export default {
+  name: 'ClauseSelection',
+  components: { ClauseSelectionModal },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否只能选择
+    selectOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 自定义点击标准选择按钮的事件
+    customClickFunc: {
+      type: Function
+    },
+    // 回显内容的字符串
+    nameStr: {
+      type: String,
+      required: false,
+      default: null
+    },
+    // 标准id
+    standardId: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  methods: {
+    // 点击选择条款按钮
+    clauseClick () {
+      if (!this.standardId) {
+        this.$message.warning(this.$t('clauseSelect.pleaseSelectStandard'))
+        return
+      }
+      if (this.customClickFunc && typeof this.customClickFunc === 'function') {
+        this.customClickFunc(() => {
+          this.$refs.clauseSelectionModal.open()
+        })
+        return
+      }
+      this.$refs.clauseSelectionModal.open()
+    },
+    // 清空输入框
+    clearInput () {
+      console.log('输入框清空了')
+      this.$emit('change', '')
+      this.$emit('nameChange', '')
+      this.$emit('listChange', [])
+    },
+    // 输入框输入监听
+    indexClick (event) {
+      this.$emit('change', event.target.value)
+    },
+    modalInput (value) {
+      this.$emit('change', value)
+    },
+    modalNameChange (value) {
+      this.$emit('nameChange', value)
+    },
+    modalListChange (value) {
+      this.$emit('listChange', value)
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+.selection-wrapper {
+  height: 40px;
+  line-height: 40px;
+}
+
+.box-title-text {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .box-input {
+    width: 100%;
+  }
+
+  .button-box {
+    margin-left: 10px;
+  }
+}
+
+.close-icon {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+  transition: color 0.3s;
+}
+
+.close-icon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+</style>
@@ -0,0 +1,269 @@
+<template>
+  <a-drawer
+    :title="$t('clauseSelect.selectClause')"
+    :maskClosable="false"
+    :width="1000"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    class="custom-drawer-style">
+    <div class="custom-drawer-style-scroll">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :sm="8">
+              <a-form-item :label="$t('clauseSelect.clauseNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :placeholder="$t('pleaseEnter')+$t('clauseSelect.clauseNumber')"
+                         v-model="queryParam.clauseNumber"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :sm="8">
+              <a-form-item :label="$t('clauseSelect.clauseName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :placeholder="$t('pleaseEnter')+$t('clauseSelect.clauseName')"
+                         v-model="queryParam.clauseName"></a-input>
+              </a-form-item>
+            </a-col>
+            <div style="float: right;overflow: hidden;margin-right: 41px;margin-bottom: 20px"
+                 class="table-page-search-submitButtons">
+              <a-button style="margin-left: 8px" type="primary" icon="search" @click="searchQuery">{{ $t('query') }}</a-button>
+              <a-button style="margin-left: 8px" type="primary" ghost icon="reload" @click="searchReset">{{ $t('reset') }}</a-button>
+            </div>
+          </a-row>
+        </a-form>
+      </div>
+      <a-table
+        :columns="columns"
+        rowKey="id"
+        :scroll="{x: 900}"
+        :data-source="dataList"
+        :pagination="ipagination"
+        :row-selection="{ type: type, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :loading="loading"
+        @change="handleTableChange">
+        <template slot="text" slot-scope="text">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+        <!--   条款内容  -->
+        <template v-slot:clauseContent="text, record">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <a v-if="text" class="link-a" @click="handleClauseContent(record)">{{ text }}</a>
+            <div v-else class="table-text">{{ global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+      </a-table>
+    </div>
+
+    <div class="custom-drawer-style-bottom-btn">
+      <a-button @click="handleCancel">{{ $t('cancel') }}</a-button>
+      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">{{ $t('submit') }}</a-button>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+
+import { getClauseListByStandard } from '../../api/api'
+
+export default {
+  name: 'ClauseSelectionModal',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'checkbox'
+    },
+    // 标准id
+    standardId: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      labelCol: {
+        sm: 8
+      },
+      wrapperCol: {
+        sm: 14
+      },
+      selectedRowKeys: [],
+      selectedRowList: [],
+      loading: false,
+      queryParam: {},
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columns: [
+        { // 条款号
+          title: this.$t('clauseSelect.clauseNumber'),
+          dataIndex: 'clauseNumber',
+          align: 'center',
+          width: 150,
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 条款名称
+          title: this.$t('clauseSelect.clauseName'),
+          dataIndex: 'clauseName',
+          align: 'center',
+          width: 150,
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 条款内容
+          title: this.$t('clauseSelect.clauseContent'),
+          dataIndex: 'clauseContent',
+          align: 'center',
+          width: 150,
+          scopedSlots: { customRender: 'clauseContent' }
+        }
+      ],
+      dataList: [],
+      filters: {}
+    }
+  },
+  methods: {
+    open () {
+      this.visible = true
+      this.queryParam = {}
+      if (this.standardId) {
+        this.filters.standardId = this.standardId
+      }
+      this.replacePage()
+    },
+    // 获取表格数据
+    replacePage (arg) {
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      const query = {
+        ...this.queryParam,
+        ...this.filters,
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize
+      }
+      // this.selectedRowKeys = []
+      this.loading = true
+      getClauseListByStandard(query).then((res) => {
+        if (res.success) {
+          this.dataList = res.result.records
+          this.ipagination.total = res.result.total
+          this.selectedRowKeys = this.value ? this.value.split(',') : (this.selectedRowKeys || [])
+        } else {
+          this.dataList = []
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    searchQuery () {
+      this.replacePage(1)
+    },
+    searchReset () {
+      this.queryParam = {}
+      this.replacePage(1)
+    },
+    // 表格选择改变
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      // this.selectedRowList = row
+      if (this.type === 'checkbox') {
+        if (selectedRowKeys.length > this.selectedRowList.length) {
+          // 说明是增加了数据
+          for (const rowIndex in selectedRows) {
+            if (!this.selectedRowList.find(item => item.standardNumber === selectedRows[rowIndex].standardNumber)) {
+              // 不存在，追加
+              this.selectedRowList.push(selectedRows[rowIndex])
+            }
+          }
+        } else {
+          // 说明是删除了数据
+          if (selectedRowKeys && selectedRowKeys.length > 0) {
+            // 没有选中数据，说明这一页没有选中数据了
+            for (let i = 0; i < this.selectedRowList.length; i++) {
+              if (!selectedRowKeys.find(item => item === this.selectedRowList[i].standardNumber)) {
+                // 表格选中中没有找到这一条数据，说明已经被删了
+                this.selectedRowList.splice(i, 1)
+                i--
+              }
+            }
+          } else {
+            this.selectedRowList = []
+          }
+        }
+        console.log(this.selectedRowList)
+      } else {
+        this.selectedRowList = selectedRows
+      }
+    },
+    handleTableChange (pagination) {
+      // 分页、排序、筛选变化时触发
+      this.ipagination = pagination
+      this.replacePage()
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleSubmit () {
+      const serialNumber = []
+      const serialNameArr = []
+      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
+        this.selectedRowList.forEach(res => {
+          serialNumber.push(res.standardNumber)
+          serialNameArr.push(res.standardName)
+        })
+        this.$emit('change', this.selectedRowKeys.join(','))
+        this.$emit('nameChange', serialNameArr.join(','))
+        this.$emit('listChange', this.selectedRowList)
+        this.close()
+      } else {
+        this.$message.warning(this.$t('selectLeastOne'))
+      }
+    },
+    close () {
+      this.visible = false
+      this.selectedRowKeys = []
+      this.ipagination = {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      }
+    },
+    // 点击条款内容
+    handleClauseContent (record) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+</style>