[add] 绑定零部件

This commit is contained in:
lideqin
2024-04-15 18:09:09 +08:00
parent afdb1ca0fd
commit b13c9fe5b8
8 changed files with 1199 additions and 0 deletions
@@ -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>
@@ -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>
@@ -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>