From b13c9fe5b88a8a75b5a8b5dd4891f86a654458b4 Mon Sep 17 00:00:00 2001
From: lideqin <694785430@qq.com>
Date: Mon, 15 Apr 2024 18:09:09 +0800
Subject: [PATCH] =?UTF-8?q?[add]=20=E7=BB=91=E5=AE=9A=E9=9B=B6=E9=83=A8?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/api.js                                |   9 +
 src/common/lang/system/zh.js                  |  11 +
 src/common/lang/zh-cn.js                      |  11 +
 src/components/selection/ClauseSelection.vue  | 143 +++++++++
 .../selection/ClauseSelectionModal.vue        | 269 ++++++++++++++++
 .../system/bindingParts/BindingParts.vue      | 260 ++++++++++++++++
 .../modules/BingingPartsModal.vue             | 207 +++++++++++++
 .../bindingParts/modules/ClauseModal.vue      | 289 ++++++++++++++++++
 8 files changed, 1199 insertions(+)
 create mode 100644 src/components/selection/ClauseSelection.vue
 create mode 100644 src/components/selection/ClauseSelectionModal.vue
 create mode 100644 src/views/system/bindingParts/BindingParts.vue
 create mode 100644 src/views/system/bindingParts/modules/BingingPartsModal.vue
 create mode 100644 src/views/system/bindingParts/modules/ClauseModal.vue

diff --git a/src/api/api.js b/src/api/api.js
index 7189cf73..ca1e71b6 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -138,6 +138,11 @@ const getWorkGroupTreeList = (params) => getAction('/sys/lawsWorkingGroup/list',
 // 企业级别映射管理，获取列表
 const getEnterpriseLevelMapList = (params) => getAction('/sys/lawsGrade/list', params)
 
+// 绑定零部件-获取零部件
+const getPartInfo = (params) => getAction('', params)
+// 根据标准id获取条款列表
+const getClauseListByStandard = (params) => getAction('', params)
+
 // ASMS接口管理-新增
 const addAsmsInterface = (params) => postAction('/docking/asms/api/lawsAsmsOpenApi/add', params)
 // ASMS接口管理-编辑
@@ -224,6 +229,10 @@ export {
   getWorkGroupTreeList,
 
   getEnterpriseLevelMapList,
+
+  getPartInfo,
+  getClauseListByStandard,
+
   getSSOUserInfo,
   getTodoSSOUserInfo,
   uploadHandStamp,
diff --git a/src/common/lang/system/zh.js b/src/common/lang/system/zh.js
index b8cf69d0..f059fc95 100644
--- a/src/common/lang/system/zh.js
+++ b/src/common/lang/system/zh.js
@@ -93,5 +93,16 @@ module.exports = {
     standardizationEngineer: '标准化工程师',
     contactPerson: '联络人',
     contactPersonSupervisorLevelLeader: '部门联络人主管级领导'
+  },
+  // 绑定零部件
+  bindingParts: {
+    partNumber: '零部件号',
+    partName: '零部件名称',
+    bindingPersonnel: '绑定人员',
+    useBindingRelationship: '使用绑定关系',
+    clauseNumber: '条款号',
+    bindingTime: '绑定时间',
+    confirmUseBindRelationship: '确认使用绑定关系',
+    isUseBindRelationship: '是否使用绑定关系？'
   }
 }
diff --git a/src/common/lang/zh-cn.js b/src/common/lang/zh-cn.js
index d35b8c9f..b69a29ed 100644
--- a/src/common/lang/zh-cn.js
+++ b/src/common/lang/zh-cn.js
@@ -580,6 +580,17 @@ module.exports = {
     textState: '标准状态',
     evaluationState: '评估状态'
   },
+  // 条款选择器
+  clauseSelect: {
+    selectClause: '选择条款',
+    clauseNumber: '条款号',
+    clauseName: '条款名称',
+    clauseContent: '条款内容',
+    articleNumber: '条文号',
+    articleTitle: '条文标题',
+    articleContent: '条文内容',
+    pleaseSelectStandard: '请先选择标准'
+  },
   // 企标计划选择器
   enterprisePlanSelect: {
     title: '企标计划选择'
diff --git a/src/components/selection/ClauseSelection.vue b/src/components/selection/ClauseSelection.vue
new file mode 100644
index 00000000..5c97f2db
--- /dev/null
+++ b/src/components/selection/ClauseSelection.vue
@@ -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>
diff --git a/src/components/selection/ClauseSelectionModal.vue b/src/components/selection/ClauseSelectionModal.vue
new file mode 100644
index 00000000..fc851e4b
--- /dev/null
+++ b/src/components/selection/ClauseSelectionModal.vue
@@ -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>
diff --git a/src/views/system/bindingParts/BindingParts.vue b/src/views/system/bindingParts/BindingParts.vue
new file mode 100644
index 00000000..29ec2e57
--- /dev/null
+++ b/src/views/system/bindingParts/BindingParts.vue
@@ -0,0 +1,260 @@
+<template>
+  <a-card :bordered="false">
+
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <!--零部件号-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="$t('system.bindingParts.partNumber')">
+              <j-input
+                :placeholder="$t('pleaseEnter') + $t('system.bindingParts.partNumber')"
+                v-model="queryParam.partNumber"></j-input>
+            </a-form-item>
+          </a-col>
+          <!--零部件名称-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="$t('system.bindingParts.partName')">
+              <j-input
+                :placeholder="$t('pleaseEnter') + $t('system.bindingParts.partName')"
+                v-model="queryParam.partName"></j-input>
+            </a-form-item>
+          </a-col>
+          <!--标准编号-->
+          <a-col :md="6" :sm="12">
+            <a-form-item :label="$t('standardNumber')">
+              <j-input
+                :placeholder="$t('pleaseEnter') + $t('standardNumber')"
+                v-model="queryParam.standardNumber"></j-input>
+            </a-form-item>
+          </a-col>
+          <template v-if="toggleSearchStatus">
+            <!--标准名称-->
+            <a-col :md="6" :sm="12">
+              <a-form-item :label="$t('standardName')">
+                <j-input
+                  :placeholder="$t('pleaseEnter') + $t('standardName')"
+                  v-model="queryParam.standardNumber"></j-input>
+              </a-form-item>
+            </a-col>
+            <!--绑定人员-->
+            <a-col :md="6" :sm="12">
+              <a-form-item :label="$t('system.bindingParts.bindingPersonnel')">
+                <j-input
+                  :placeholder="$t('pleaseEnter') + $t('system.bindingParts.bindingPersonnel')"
+                  v-model="queryParam.bindingPersonnel"></j-input>
+              </a-form-item>
+            </a-col>
+          </template>
+
+          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+            <a @click="handleToggleSearch" style="margin-left: 8px">
+              {{ toggleSearchStatus ? $t('putAway') : $t('open') }}
+              <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+            </a>
+            <a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
+            <a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
+          </div>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <!--  新增  -->
+      <a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
+      <!--  批量删除  -->
+      <a-button icon="delete" type="primary" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
+      <!--  使用绑定关系  -->
+      <a-button icon="setting" type="primary" ghost @click="useBindingRelationship">{{ $t('system.bindingParts.useBindingRelationship') }}</a-button>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <j-table
+        :can-drag="true"
+        :scroll="{x: '100%', y: yScrollHeight}"
+        ref="table"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <!--标准编号、标准名称-->
+        <template v-slot:standardSlot="{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="handleGoDetail(record)">{{ text }}</a>
+            <div v-else class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+        <!--条款号-->
+        <template v-slot:clauseSlot="{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="handleGoClause(record)">{{ text }}</a>
+            <div v-else class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+        <template v-slot:action="{text, record}">
+          <a @click="handleEdit(record)">{{ $t('edit') }}</a>
+          <a-divider type="vertical" />
+          <a @click="handleDelete(record.id)">{{ $t('delete') }}</a>
+        </template>
+
+      </j-table>
+    </div>
+    <!-- 新增、编辑弹框 -->
+    <binging-parts-modal ref="modalForm" @ok="modalFormOk"></binging-parts-modal>
+    <!-- 点击条款号的弹框 -->
+    <clause-modal ref="clauseModalRef"></clause-modal>
+  </a-card>
+</template>
+
+<script>
+import { JeroListMixin } from '../../../mixins/JeroListMixin'
+import JTable from '../../../components/jero/JTable'
+import BingingPartsModal from './modules/BingingPartsModal'
+import ClauseModal from './modules/ClauseModal'
+import { postAction } from '../../../api/manage'
+
+export default {
+  name: 'BindingParts',
+  mixins: [JeroListMixin],
+  components: { ClauseModal, BingingPartsModal, JTable },
+  data () {
+    return {
+      columns: [
+        { // 零部件号
+          title: this.$t('system.bindingParts.partNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'partNumber',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 零部件名称
+          title: this.$t('system.bindingParts.partName'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'partName',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 标准编号
+          title: this.$t('standardNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'standardNumber',
+          scopedSlots: { customRender: 'standardSlot' }
+        },
+        { // 标准名称
+          title: this.$t('standardName'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'standardName',
+          scopedSlots: { customRender: 'standardSlot' }
+        },
+        { // 条款号
+          title: this.$t('system.bindingParts.clauseNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'clauseNumber',
+          scopedSlots: { customRender: 'clauseSlot' }
+        },
+        { // 绑定人员
+          title: this.$t('system.bindingParts.bindingPersonnel'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'bindingPersonnel',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 绑定时间
+          title: this.$t('system.bindingParts.bindingTime'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'bindingTime',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 操作
+          title: this.$t('operation'),
+          scopedSlots: { customRender: 'action' },
+          align: 'center',
+          fixed: 'right',
+          width: 170
+        }
+      ],
+      url: {
+        list: '',
+        deleteBatch: '',
+        delete: '',
+        useBindingRelationship: '' // 使用绑定关系
+      },
+      dataSource: [
+        { id: 1, clauseNumber: 1 }
+      ]
+    }
+  },
+  methods: {
+    // 使用绑定关系
+    useBindingRelationship () {
+      if (this.selectedRowKeys.length <= 0) {
+        this.$message.warning(this.$t('selectARecord'))
+      } else {
+        const ids = this.selectedRowKeys.join(',')
+        const that = this
+        this.$confirm({
+          title: this.$t('system.bindingParts.confirmUseBindRelationship'),
+          content: this.$t('system.bindingParts.isUseBindRelationship'),
+          onOk: () => {
+            that.loading = true
+            postAction(that.url.useBindingRelationship, { ids: ids }).then((res) => {
+              if (res.success) {
+                // 重新计算分页问题
+                that.reCalculatePage(that.selectedRowKeys.length)
+                that.$message.success(res.message)
+                that.loadData()
+                that.onClearSelected()
+              } else {
+                that.$message.warning(res.message)
+              }
+            }).finally(() => {
+              that.loading = false
+            })
+          }
+        })
+      }
+    },
+    // 点击标准编号和标准名称
+    handleGoDetail (record) {
+      let path = ''
+      // 需要先判断是哪种标准
+      if (record.source === '1') {
+        path = '/standardRegulationLibrary/DomesticStandardDetail'
+      } else if (record.source === '2') {
+        path = '/standardRegulationLibrary/OverseasStandardDetail'
+      } else if (record.source === '3') {
+        path = '/enterpriseStandardLibrary/enterpriseStandardDetail'
+      }
+      this.$openPageNewSheet({
+        path: path,
+        query: {
+          id: record.standardId
+        }
+      })
+    },
+    // 点击条款号
+    handleGoClause (record) {
+      this.$refs.clauseModalRef.open(record.infoId)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/bindingParts/modules/BingingPartsModal.vue b/src/views/system/bindingParts/modules/BingingPartsModal.vue
new file mode 100644
index 00000000..99b2e0c2
--- /dev/null
+++ b/src/views/system/bindingParts/modules/BingingPartsModal.vue
@@ -0,0 +1,207 @@
+<template>
+  <j-modal
+    :title="title"
+    :maskClosable="true"
+    :width="500"
+    :closable="true"
+    switchFullscreen
+    @cancel="handleCancel"
+    @ok="handleOk"
+    :visible="visible">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <!--零部件号-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.bindingParts.partNumber')">
+          <a-select v-decorator.trim="[ 'partNumber', validatorRules.partNumber ]" disabled>
+            <a-select-option v-for="item in partNumberOption" :key="item.id" :value="item.number">
+              {{ item.number }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--零部件名称-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.bindingParts.partName')">
+          <a-select v-decorator.trim="[ 'partName', validatorRules.partName ]" disabled>
+            <a-select-option v-for="item in partNumberOption" :key="item.id" :value="item.number">
+              {{ item.number }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <!--标准编号-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
+          <standard-selection :placeholder="$t('pleaseSelect') + $t('standardNumber')"
+                              v-decorator="['standardId', validatorRules.standardId]"
+                              type="radio"
+                              @listChange="handleStandardChange" />
+        </a-form-item>
+        <!--标准名称-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('standardName')"
+                   :maxLength="50"
+                   disabled
+                   v-decorator.trim="[ 'standardName', validatorRules.standardName ]" />
+        </a-form-item>
+        <!--条款号-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.bindingParts.clauseNumber')">
+          <clause-selection :placeholder="$t('pleaseSelect') + $t('system.bindingParts.clauseNumber')"
+                            v-decorator="['clauseId', validatorRules.clauseId]"
+                            :standard-id="standardId"
+          />
+        </a-form-item>
+        <!--绑定人员-->
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('system.bindingParts.bindingPersonnel')">
+          <a-input :placeholder="$t('pleaseEnter') + $t('system.bindingParts.bindingPersonnel')"
+                   :maxLength="50"
+                   disabled
+                   v-decorator.trim="[ 'bindingPersonnel', validatorRules.bindingPersonnel ]" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import StandardSelection from '@/components/selection/StandardSelection'
+import pick from 'lodash.pick'
+import ClauseSelection from '../../../../components/selection/ClauseSelection'
+import { getPartInfo } from '../../../../api/api'
+import { postAction } from '../../../../api/manage'
+
+export default {
+  name: 'BingingPartsModal',
+  components: { ClauseSelection, StandardSelection },
+  data () {
+    return {
+      title: '',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        // 零部件号
+        partNumber: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('system.bindingParts.partNumber') }
+          ],
+          validateTrigger: 'change'
+        },
+        // 零部件名称
+        partName: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('system.bindingParts.partName') }
+          ],
+          validateTrigger: 'change'
+        },
+        // 标准编号
+        standardNumber: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('standardNumber') }
+          ],
+          validateTrigger: 'change'
+        },
+        // 绑定人员
+        bindingPersonnel: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('system.bindingParts.bindingPersonnel') }
+          ],
+          validateTrigger: 'change'
+        }
+      },
+      url: {
+        add: '',
+        edit: ''
+      },
+      partNumberOption: [], // 零部件下拉框
+      standardId: ''
+    }
+  },
+  methods: {
+    async add () {
+      this.visible = true
+      await this.getPartInfo((res) => {
+        this.form.resetFields()
+        this.$nextTick(() => {
+          this.form.setFieldsValue(pick(res.result, 'partNumber', 'partName', 'bindingPersonnel'))
+        })
+      })
+    },
+    edit (record) {
+      this.visible = true
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'partNumber', 'partName', 'standardNumber', 'standardName', 'clauseNumber', 'bindingPersonnel'))
+      })
+    },
+    // 标准编号改变
+    handleStandardChange (value) {
+      this.standardId = value[0].id
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(value[0], 'standardName'))
+      })
+    },
+    // 获取零部件
+    getPartInfo (callback) {
+      this.confirmLoading = true
+      getPartInfo().then(res => {
+        if (res.success) {
+          this.partNumberOption = res.result
+          if (callback) {
+            callback(res)
+          }
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    close () {
+      this.visible = false
+      this.partNumberOption = []
+    },
+    handleCancel () {
+      this.close()
+    },
+    handleOk () {
+      if (this.confirmLoading) return
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.confirmLoading = true
+          const param = Object.assign({}, values)
+          console.log(param)
+          let url = ''
+          if (this.model.id) {
+            url = this.url.edit
+          } else {
+            url = this.url.add
+          }
+          postAction(url, param).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.$emit('ok')
+              this.close()
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/bindingParts/modules/ClauseModal.vue b/src/views/system/bindingParts/modules/ClauseModal.vue
new file mode 100644
index 00000000..23e73519
--- /dev/null
+++ b/src/views/system/bindingParts/modules/ClauseModal.vue
@@ -0,0 +1,289 @@
+<template>
+  <j-modal
+    :title="title"
+    :maskClosable="true"
+    :width="1200"
+    :closable="true"
+    switchFullscreen
+    :footer="false"
+    @cancel="handleCancel"
+    :visible="visible">
+    <div class="page-left-right-layout">
+      <!--树部分-->
+      <div class="page-left-box">
+        <a-input-search class="tree-search" v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
+        <div class="page-tree-box page-tree-box-has-search">
+          <a-spin :spinning="treeLoading">
+            <a-tree :show-line="true"
+                    :show-icon="true"
+                    :tree-data="treeData"
+                    :selected-keys="selectedKeys"
+                    :expanded-keys.sync="expandedKeys"
+                    :replaceFields="{key: 'id'}">
+              <template #title="record">
+                <div class="tree-operate-node"
+                     @click="handleSelectTreeNode(record)">
+                  <a-icon class="parent-node-icon"
+                          type="folder"
+                          v-if="record.dataRef.children && record.dataRef.children.length > 0" />
+                  <a-tooltip>
+                    <template #title>
+                      {{ record.name }}{{ record.itemName }}
+                    </template>
+                    <span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
+                  </a-tooltip>
+                </div>
+              </template>
+            </a-tree>
+          </a-spin>
+        </div>
+      </div>
+      <!--表格部分-->
+      <div class="page-right-box">
+        <!-- 查询区域 -->
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <!--条文号-->
+              <a-col :md="6" :sm="12">
+                <a-form-item :label="$t('clauseSelect.articleNumber')">
+                  <j-input
+                    :placeholder="$t('pleaseEnter') + $t('clauseSelect.articleNumber')"
+                    v-model="queryParam.articleNumber"></j-input>
+                </a-form-item>
+              </a-col>
+              <!--条文标题-->
+              <a-col :md="6" :sm="12">
+                <a-form-item :label="$t('clauseSelect.articleTitle')">
+                  <j-input
+                    :placeholder="$t('pleaseEnter') + $t('clauseSelect.articleTitle')"
+                    v-model="queryParam.articleTitle"></j-input>
+                </a-form-item>
+              </a-col>
+              <!--条文内容-->
+              <a-col :md="6" :sm="12">
+                <a-form-item :label="$t('clauseSelect.articleContent')">
+                  <j-input
+                    :placeholder="$t('pleaseEnter') + $t('clauseSelect.articleContent')"
+                    v-model="queryParam.articleContent"></j-input>
+                </a-form-item>
+              </a-col>
+
+              <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
+                <a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
+              </div>
+
+            </a-row>
+          </a-form>
+        </div>
+
+        <div>
+          <j-table
+            :columns="columns"
+            :dataSource="dataSource"
+            :can-drag="true"
+            rowKey="id"
+            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            :pagination="ipagination"
+            :scroll="{x: '100%', y: yScrollHeight}"
+            :loading="loading"
+            @change="handleTableChange">
+
+            <!--条文内容-->
+            <template slot="item_content" slot-scope="{text, record}">
+              <div class="table-text" v-if="text || text === 0" @click="showContent('item_content', text,record)">
+                {{ text && text !== 'null' ? text.replace(/<.*?>/ig, ' ') : '' }}
+              </div>
+              <div class="table-text" v-else>{{ global.emptyLine }}</div>
+            </template>
+
+          </j-table>
+        </div>
+      </div>
+    </div>
+    <!--  条文内容  -->
+    <split-clause-detail ref="splitClauseDetail" />
+  </j-modal>
+</template>
+
+<script>
+import {
+  getClauseTreeData
+} from '../../../../api/documentToolApi'
+import SplitClauseDetail from '../../../documentTool/documentSplit/modules/SplitClauseDetail'
+import { JeroListMixin } from '../../../../mixins/JeroListMixin'
+import JTable from '../../../../components/jero/JTable'
+import { postAction } from '../../../../api/manage'
+
+export default {
+  name: 'ClauseModal',
+  mixins: [JeroListMixin],
+  components: { SplitClauseDetail, JTable },
+  data () {
+    return {
+      title: '查看',
+      visible: false,
+      loading: false, // 提交的加载
+      treeLoading: false, // 树形区域的加载
+      nodeTreeItem: null, // 右键菜单
+      infoId: '',
+      menuId: '',
+      treeData: [],
+      searchValue: '',
+      selectedKeys: [],
+      url: {
+        list: '/laws/DocumentTool/documentSplit/queryDocumentSplitDetail'
+      },
+      disableMixinCreated: true,
+      expandedKeys: [],
+      columns: [
+        { // 条文号
+          title: this.$t('clauseSelect.articleNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'articleNumber',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 条文标题
+          title: this.$t('clauseSelect.articleTitle'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'articleTitle',
+          scopedSlots: { customRender: 'text' }
+        },
+        { // 条文内容
+          title: this.$t('clauseSelect.articleContent'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'articleContent',
+          scopedSlots: { customRender: 'text' }
+        }
+      ]
+    }
+  },
+  computed: {
+    yScrollHeight () {
+      return `calc(100vh - 200px)`
+    }
+  },
+  methods: {
+    open (infoId) {
+      this.visible = true
+      this.infoId = infoId
+      this.filters = {
+        menu_id: this.menuId,
+        info_id: this.infoId
+      }
+      this.loadData()
+      this.infoId = infoId
+      this.loadMenuData()
+    },
+    loadData (arg) {
+      if (!this.url.list) {
+        this.$message.warning('请设置url.list属性!')
+        return
+      }
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      const params = this.getQueryParams()
+      this.loading = true
+      postAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.ipagination.current = res.result.current - 1
+            this.loadData()
+            return
+          }
+          this.dataSource = res.result.records || []
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 选中树节点
+     * @param dataRef
+     */
+    handleSelectTreeNode ({ dataRef }) {
+      this.selectedKeys = [dataRef.id]
+      this.menuId = this.selectedKeys[0]
+      this.filters.info_id = this.infoId
+      this.filters.menu_id = this.menuId
+      this.loadData()
+    },
+
+    /**
+     * 显示条款内容、条文解读弹框
+     * @param fieldName
+     * @param val
+     */
+    showContent (fieldName, val) {
+      const title = (this.columns.find(tt => tt.dbFieldName === fieldName) || {}).dbFieldTxt
+      if (title) {
+        this.$refs.splitClauseDetail.title = title
+      }
+      this.$refs.splitClauseDetail.open(val)
+    },
+    // 获取左侧目录数据
+    loadMenuData () {
+      const params = {
+        infoId: this.infoId,
+        name: this.searchValue
+      }
+      this.treeLoading = true
+      getClauseTreeData(params).then(res => {
+        if (res.success) {
+          this.treeData = res.result || []
+          this.expandedKeys = this.treeData.length > 0 ? [this.treeData[0].id] : []
+        }
+      }).finally(() => {
+        this.treeLoading = false
+      })
+    },
+    // 用于点击空白处隐藏增删改菜单
+    clearMenu () {
+      this.nodeTreeItem = null
+    },
+    onSearch () {
+      this.loadMenuData()
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.infoId = ''
+      this.menuId = ''
+      this.treeData = []
+      this.searchValue = ''
+      this.selectedKeys = []
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+.page-left-right-layout {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.parent-node-icon {
+  color: #1D2129;
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+/deep/ .ant-form-item-label {
+  min-width: 70px !important;
+}
+</style>