属性标识管理
This commit is contained in:
Xia Zekun
@@ -0,0 +1,12 @@
|
|||||||
|
import { getAction, postAction } from './manage.js'
|
||||||
|
|
||||||
|
// 属性标识管理-新增
|
||||||
|
const addLabel = (params) => postAction('/laws/lawsLabelDatabase/add', params)
|
||||||
|
|
||||||
|
// 属性标识管理-编辑
|
||||||
|
const editLabel = (params) => postAction('/laws/lawsLabelDatabase/edit', params)
|
||||||
|
|
||||||
|
export {
|
||||||
|
addLabel,
|
||||||
|
editLabel,
|
||||||
|
}
|
||||||
@@ -587,6 +587,13 @@ module.exports = {
|
|||||||
downTemplate: 'Click to download template',
|
downTemplate: 'Click to download template',
|
||||||
noFileMsg: 'Please select a file'
|
noFileMsg: 'Please select a file'
|
||||||
},
|
},
|
||||||
|
// 属性标识管理
|
||||||
|
attributeIdentification:{
|
||||||
|
labelName:'Label Name',
|
||||||
|
firstLabel:'First Label',
|
||||||
|
secondLabel:'Second Label',
|
||||||
|
thirdLabel:'Third Label',
|
||||||
|
},
|
||||||
// 系统管理
|
// 系统管理
|
||||||
system,
|
system,
|
||||||
// 个人中心
|
// 个人中心
|
||||||
|
|||||||
@@ -636,6 +636,14 @@ module.exports = {
|
|||||||
primaryNodeName: '名称',
|
primaryNodeName: '名称',
|
||||||
selectedData: '已选数据'
|
selectedData: '已选数据'
|
||||||
},
|
},
|
||||||
|
// 属性标识管理
|
||||||
|
attributeIdentification:{
|
||||||
|
labelName:'标签名称',
|
||||||
|
firstLabel:'一级标签',
|
||||||
|
secondLabel:'二级标签',
|
||||||
|
thirdLabel:'三级标签',
|
||||||
|
},
|
||||||
|
|
||||||
// 系统管理
|
// 系统管理
|
||||||
system,
|
system,
|
||||||
// 个人中心
|
// 个人中心
|
||||||
|
|||||||
@@ -0,0 +1,288 @@
|
|||||||
|
<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 :span="10">
|
||||||
|
<a-form-item :label="$t('attributeIdentification.labelName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||||
|
<a-input :placeholder="$t('pleaseEnter') + $t('attributeIdentification.labelName')" v-model="queryParam[searchField]" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="8">
|
||||||
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||||
|
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">{{ $t('query') }}</a-button>
|
||||||
|
<a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
|
||||||
|
</span>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 按钮区域 -->
|
||||||
|
<div class="table-operator">
|
||||||
|
<!-- 新增 -->
|
||||||
|
<a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
|
||||||
|
<!-- 批量删除 -->
|
||||||
|
<a-button type="primary" icon="delete" @click="batchDel">{{ $t('batchDelete') }}</a-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-content">
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
rowKey="code"
|
||||||
|
bordered
|
||||||
|
:scroll="{x: '100%'}"
|
||||||
|
:data-source="dataSource"
|
||||||
|
:pagination="ipagination"
|
||||||
|
:row-selection="rowSelection"
|
||||||
|
:loading="confirmLoading"
|
||||||
|
:childrenColumnName="childrenFieldName"
|
||||||
|
@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 slot="action" slot-scope="text, record, index" class="action-span-cell">
|
||||||
|
<a @click="handleEdit(record, index)" v-show='handleShowEdit(record)' class="table-ope-btn">{{ $t('edit') }}</a>
|
||||||
|
<a @click="handleDelete(index)" class="table-ope-btn" style="margin-left: 8px">{{ $t('delete') }}</a>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
<!--新增、编辑-->
|
||||||
|
<attribute-identification-modal ref='modalForm' @ok="modalFormOk"/>
|
||||||
|
</a-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getAction, postAction } from '../../../api/manage'
|
||||||
|
import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
|
||||||
|
import AttributeIdentificationModal from './modules/AttributeIdentificationModal'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TreeSelectModal',
|
||||||
|
components:{AttributeIdentificationModal},
|
||||||
|
mixins: [JeroListMixin],
|
||||||
|
props: {
|
||||||
|
dictId: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: 'checkbox'
|
||||||
|
},
|
||||||
|
// 是否校验必选
|
||||||
|
checkRequired: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 标签库的限制，只能选第三级
|
||||||
|
isTagLibraryRestriction: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
rowSelection () {
|
||||||
|
return {
|
||||||
|
selectedRowKeys: this.selectedRowKeys,
|
||||||
|
onChange: this.onSelectChange,
|
||||||
|
type: this.type,
|
||||||
|
getCheckboxProps: record => ({
|
||||||
|
props: {
|
||||||
|
disabled: this.isTagLibraryRestriction ? record.level + '' !== '3' : false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
url:{
|
||||||
|
queryLabelTree:'/laws/lawsLabelDatabase/queryLabelTree',
|
||||||
|
deleteBatch:'/laws/lawsLabelDatabase/deleteBatch'
|
||||||
|
},
|
||||||
|
confirmLoading: false,
|
||||||
|
queryParam: {},
|
||||||
|
labelCol: {
|
||||||
|
span: 8
|
||||||
|
},
|
||||||
|
wrapperCol: {
|
||||||
|
span: 16
|
||||||
|
},
|
||||||
|
dataSourceRight: [],
|
||||||
|
filters: {},
|
||||||
|
/* 分页参数 */
|
||||||
|
ipagination: {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 5,
|
||||||
|
pageSizeOptions: ['5', '10', '20', '30', '100', '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('system.tag.name'),
|
||||||
|
dataIndex: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: this.$t('operation'),
|
||||||
|
scopedSlots: { customRender: 'action' },
|
||||||
|
align: 'center',
|
||||||
|
width: 150
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataSource: [],
|
||||||
|
selectedRowKeys: [],
|
||||||
|
childrenFieldName: 'childrenList',
|
||||||
|
searchField: 'nodeName'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.searchQuery()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
searchQuery () {
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
searchReset () {
|
||||||
|
this.queryParam = {}
|
||||||
|
this.loadData(1)
|
||||||
|
},
|
||||||
|
loadData (arg) {
|
||||||
|
if (arg) {
|
||||||
|
this.ipagination.current = 1
|
||||||
|
}
|
||||||
|
this.confirmLoading = true
|
||||||
|
const params = Object.assign({}, this.queryParam, this.filters)
|
||||||
|
params.pageNo = this.ipagination.current
|
||||||
|
params.pageSize = this.ipagination.pageSize
|
||||||
|
getAction(this.url.queryLabelTree, params).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.dataSource = res.result.records || res.result
|
||||||
|
if (res.result.total) {
|
||||||
|
this.ipagination.total = res.result.total
|
||||||
|
} else {
|
||||||
|
this.ipagination.total = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSelectChange (selectedRowKeys, selectedRows) {
|
||||||
|
this.selectedRowKeys = selectedRowKeys
|
||||||
|
if (this.type === 'checkbox') {
|
||||||
|
if (selectedRowKeys.length > this.dataSourceRight.length) {
|
||||||
|
// 说明是增加了数据
|
||||||
|
for (const rowIndex in selectedRows) {
|
||||||
|
if (!this.dataSourceRight.find(item => item.code === selectedRows[rowIndex].code)) {
|
||||||
|
// 右侧不存在，追加到右侧表格
|
||||||
|
this.dataSourceRight.push(selectedRows[rowIndex])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 说明是删除了数据
|
||||||
|
if (selectedRowKeys && selectedRowKeys.length > 0) {
|
||||||
|
// 没有选中数据，说明这一页没有选中数据了
|
||||||
|
for (let i = 0; i < this.dataSourceRight.length; i++) {
|
||||||
|
if (!selectedRowKeys.find(item => item === this.dataSourceRight[i].code)) {
|
||||||
|
// 表格选中中没有找到这一条数据，说明已经被删了
|
||||||
|
this.dataSourceRight.splice(i, 1)
|
||||||
|
i--
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.dataSourceRight = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.dataSourceRight = selectedRows
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleShowEdit(record){
|
||||||
|
// console.log('handlwShow record',record)
|
||||||
|
// 只有第三级标签允许修改
|
||||||
|
return record.code.split('-').length === 3
|
||||||
|
},
|
||||||
|
handleTableChange (pagination) {
|
||||||
|
this.ipagination = pagination
|
||||||
|
this.loadData()
|
||||||
|
},
|
||||||
|
modalFormOk () {
|
||||||
|
// 新增/修改 成功时，重载列表
|
||||||
|
this.loadData()
|
||||||
|
// 清空列表选中
|
||||||
|
this.onClearSelected()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.modal-content {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
width: 58%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title-div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
|
margin: 20px 0;
|
||||||
|
|
||||||
|
.modal-content-title {
|
||||||
|
color: #1D2129;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.name-div {
|
||||||
|
width: auto;
|
||||||
|
padding: 5px 16px;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 8px;
|
||||||
|
background: rgba(213, 44, 38, 0.08);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
opacity: 1;
|
||||||
|
color: @primary-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
/deep/ .anticon {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .ant-form-item-label {
|
||||||
|
min-width: 70px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+198
@@ -0,0 +1,198 @@
|
|||||||
|
<template>
|
||||||
|
<j-modal
|
||||||
|
:title="title"
|
||||||
|
:width="width"
|
||||||
|
:visible="visible"
|
||||||
|
:maskClosable="false"
|
||||||
|
:confirmLoading="confirmLoading"
|
||||||
|
:ok-text="$t('preservation')"
|
||||||
|
:cancel-text="$t('cancel')"
|
||||||
|
@ok="handleOk"
|
||||||
|
@cancel="handleCancel">
|
||||||
|
|
||||||
|
<a-spin :spinning="confirmLoading">
|
||||||
|
<a-form :form="form">
|
||||||
|
<!--一级标签-->
|
||||||
|
<a-row :gutter="30">
|
||||||
|
<a-col :span="18">
|
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.firstLabel')">
|
||||||
|
<j-dict-select-tag v-decorator="['firstLabel', validatorRules.firstLabel]"
|
||||||
|
:placeholder="$t('pleaseSelect') + $t('attributeIdentification.firstLabel')"
|
||||||
|
dict-code="laws_label_database,name,id,parent_id is null and del_flag = 0"
|
||||||
|
@change='firstLabelChange'
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<!--二级标签-->
|
||||||
|
<a-row :gutter="30">
|
||||||
|
<a-col :span="18">
|
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.secondLabel')">
|
||||||
|
<j-dict-select-tag v-decorator="['secondLabel', validatorRules.secondLabel]"
|
||||||
|
:placeholder="$t('pleaseSelect') + $t('attributeIdentification.secondLabel')"
|
||||||
|
:options = 'secondOptions'
|
||||||
|
@change='secondLabelChange'
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<!--三级标签-->
|
||||||
|
<a-row :gutter="30">
|
||||||
|
<a-col :span="18">
|
||||||
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.thirdLabel')">
|
||||||
|
<a-input v-decorator="['name', validatorRules.thirdLabel]"
|
||||||
|
:placeholder="$t('pleaseEnter') + $t('attributeIdentification.thirdLabel')"
|
||||||
|
:maxLength="50" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
|
||||||
|
</a-form>
|
||||||
|
</a-spin>
|
||||||
|
|
||||||
|
</j-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UserSelection from '../../../../components/selection/UserSelection.vue'
|
||||||
|
import { addLabel, editLabel } from '../../../../api/label.js'
|
||||||
|
import { ajaxGetDictItems } from '@/api/api'
|
||||||
|
import { postAction } from '@/api/manage'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'VehicleItemLibraryModal',
|
||||||
|
components: { UserSelection },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
title: this.$t('newlyAdded'),
|
||||||
|
url:{
|
||||||
|
list: '/laws/lawsLabelDatabase/list',
|
||||||
|
},
|
||||||
|
width: 800,
|
||||||
|
visible: false,
|
||||||
|
confirmLoading: false,
|
||||||
|
model: {},
|
||||||
|
form: this.$form.createForm(this),
|
||||||
|
labelCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 8 }
|
||||||
|
},
|
||||||
|
wrapperCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 16 }
|
||||||
|
},
|
||||||
|
secondOptions:[],
|
||||||
|
validatorRules: {
|
||||||
|
// 一级标签
|
||||||
|
firstLabel: {
|
||||||
|
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.firstLabel') }],
|
||||||
|
validateTrigger: 'blur'
|
||||||
|
},
|
||||||
|
// 二级标签
|
||||||
|
secondLabel: {
|
||||||
|
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('attributeIdentification.secondLabel') }],
|
||||||
|
validateTrigger: 'blur'
|
||||||
|
},
|
||||||
|
// 三级标签
|
||||||
|
thirdLabel: {
|
||||||
|
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('attributeIdentification.thirdLabel') }],
|
||||||
|
validateTrigger: 'blur'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add () {
|
||||||
|
this.form.resetFields()
|
||||||
|
this.visible = true
|
||||||
|
console.log('add','this.model',this.model)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.form.setFieldsValue(this.model)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
edit (record) {
|
||||||
|
this.form.resetFields()
|
||||||
|
this.model = Object.assign({}, record)
|
||||||
|
console.log('edit')
|
||||||
|
console.log('this.model', this.model)
|
||||||
|
// 根据parentId查询二级标签信息：
|
||||||
|
postAction(this.url.list,{id:this.model.parentId}).then((res) => {
|
||||||
|
if(res.success){
|
||||||
|
this.model.secondLabel = res.result[0].id;
|
||||||
|
this.model.firstLabel = res.result[0].parentId;
|
||||||
|
// 更新二级标签可选项
|
||||||
|
ajaxGetDictItems("laws_label_database,name,id,parent_id = '" + this.model.firstLabel + "' and del_flag = 0", null).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.secondOptions = res.result
|
||||||
|
// 显示编辑页面
|
||||||
|
this.visible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.form.setFieldsValue(this.model)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleOk () {
|
||||||
|
console.log('handleOk')
|
||||||
|
this.form.validateFields((errors, values) => {
|
||||||
|
if (!errors) {
|
||||||
|
this.confirmLoading = true
|
||||||
|
const formData = Object.assign(this.model, values)
|
||||||
|
console.log('formData',formData)
|
||||||
|
let submitFunc
|
||||||
|
if (this.model.id) {
|
||||||
|
submitFunc = editLabel
|
||||||
|
} else {
|
||||||
|
submitFunc = addLabel
|
||||||
|
}
|
||||||
|
submitFunc(formData).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$message.success(res.message)
|
||||||
|
this.close()
|
||||||
|
this.$emit('ok')
|
||||||
|
} else {
|
||||||
|
this.$message.warn(res.message)
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.confirmLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
firstLabelChange(id) {
|
||||||
|
console.log('firstLabelChange')
|
||||||
|
console.log('this.form',this.form)
|
||||||
|
this.model.secondLabel = null;
|
||||||
|
this.form.setFieldsValue(this.model);
|
||||||
|
let secondDictCode = "laws_label_database,name,id,parent_id = '" + id + "' and del_flag = 0";
|
||||||
|
ajaxGetDictItems(secondDictCode, null).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.secondOptions = res.result
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
secondLabelChange(id) {
|
||||||
|
console.log('secondLabelChange')
|
||||||
|
console.log('this.form',this.form)
|
||||||
|
this.model.parentId = id;
|
||||||
|
this.form.setFieldsValue(this.model);
|
||||||
|
},
|
||||||
|
handleCancel () {
|
||||||
|
this.close()
|
||||||
|
},
|
||||||
|
close () {
|
||||||
|
this.visible = false
|
||||||
|
this.model = {}
|
||||||
|
this.form.resetFields()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user