FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 标准库 编辑对应属性字段 体系树结构

Browse Source
This commit is contained in:
super_liu
2021-07-09 18:14:50 +08:00
parent 9db377e50f
commit 74e83d6111
3 changed files with 386 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/treeSelect/treeSelect.vue
+196
View File
@@ -0,0 +1,196 @@
<!--
/**
* 下拉选择树形组件，下拉框展示树形结构，提供选择某节点功能，方便其他模块调用
* 调用示例：
* <tree-select :height="400" // 下拉框中树形高度
* :width="200" // 下拉框中树形宽度
* :data="data" // 树结构的数据
* :defaultProps="defaultProps" // 树结构的props
* multiple // 多选
* checkStrictly // 多选时，严格遵循父子不互相关联
* :nodeKey="nodeKey" // 绑定nodeKey，默认绑定'id'
* :checkedKeys="defaultCheckedKeys" // 传递默认选中的节点key组成的数组
* @popoverHide="popoverHide"> // 事件有两个参数：第一个是所有选中的节点ID，第二个是所有选中的节点数据
* </tree-select>
*/
-->
<template>
<div>
<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
<el-popover placement="bottom-start" :width="width" trigger="manual"
v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:default-checked-keys="defaultCheckedKeys"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"></el-tree>
<el-select :style="selectStyle" slot="reference" ref="select"
v-model="selectedData"
:multiple="multiple"
@click.native="isShowSelect = !isShowSelect"
class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
export default {
name: 'tree-select',
props: {
// 树结构数据
data: {
type: Array,
default () {
return [];
}
},
defaultProps: {
type: Object,
default () {
return {};
}
},
// 配置是否可多选
multiple: {
type: Boolean,
default () {
return false;
}
},
nodeKey: {
type: String,
default () {
return 'id';
}
},
// 显示复选框情况下，是否严格遵循父子不互相关联
checkStrictly: {
type: Boolean,
default () {
return false;
}
},
// 默认选中的节点key数组
checkedKeys: {
type: Array,
default () {
return [];
}
},
width: {
type: Number,
default () {
return 593;
}
},
height: {
type: Number,
default () {
return 300;
}
}
},
data () {
return {
defaultCheckedKeys: [],
isShowSelect: false, // 是否显示树状选择器
options: [],
selectedData: [], // 选中的节点
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
selectStyle: 'width:100%;',
checkedIds: [],
checkedData: []
};
},
mounted () {
if (this.checkedKeys.length > 0) {
if (this.multiple) {
this.defaultCheckedKeys = this.checkedKeys;
this.selectedData = this.checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item);
return node.label;
});
} else {
var item = this.checkedKeys[0];
this.$refs.tree.setCurrentKey(item);
var node = this.$refs.tree.getNode(item);
this.selectedData = node.label;
}
}
},
methods: {
popoverHide () {
if (this.multiple) {
this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
} else {
this.checkedIds = this.$refs.tree.getCurrentKey();
this.checkedData = this.$refs.tree.getCurrentNode();
}
this.$emit('popoverHide', this.checkedIds, this.checkedData);
},
// 节点被点击时的回调,返回被点击的节点数据
handleNodeClick (data, node) {
if (!this.multiple) {
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
this.options = [];
this.options.push(tmpMap);
this.selectedData = node.label;
this.isShowSelect = !this.isShowSelect;
}
},
// 节点选中状态发生变化时的回调
handleCheckChange () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
this.options = checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
return tmpMap;
});
this.selectedData = this.options.map((item) => {
return item.label;
});
}
},
watch: {
isShowSelect (val) {
// 隐藏select自带的下拉框
this.$refs.select.blur();
}
}
};
</script>
<style scoped>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
.common-tree{
overflow: auto;
}
</style>
<style>
.tree-select .el-select__tags .el-tag .el-tag__close{
display: none;
}
.tree-select .el-select__tags .el-tag .el-icon-close{
display: none;
}
</style>
src/pages/processCenter/pages/creatProcess/bzrk/step1.vue
+2 -2
View File
@@ -385,7 +385,7 @@
clearable
></el-input>
</el-form-item>
<el-form-item v-if="form.standInData === '0'" label="起草单位" prop="fbjg" class="add-form-item form-item-disabled">
<el-form-item v-if="form.standInData === '0'" label="起草单位" prop="qcdw" class="add-form-item form-item-disabled">
<el-input
v-model="form.fbjg"
placeholder="请选择起草单位"
@@ -675,7 +675,7 @@
// 适用范围
txlb: '', // 体系类别
gkdw: '', // 归口管理部门
fbjg: '', // 起草单位
qcdw: '', // 起草单位
wssmr: '', // 我司署名人
cysd: '', // 我司参与深度
cllx: '', // 适用车型
src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue
+188 -110
View File
@@ -274,92 +274,132 @@
:rules="sarStandardsInfoRules"
class="label-input-form"
>
<el-form-item
prop="isRelateAccess"
label-width="150px"
class="add-form-item"
title="A类必填项多，仅A类可纳入法规清单。"
>
<template slot="label">重要度<i class="el-icon-warning-outline"></i></template>
<el-select v-model="sarStandardsInfoEO.isRelateAccess" @change="isRegulationsChange">
<el-option value="1" label="A" key="1"></el-option>
<el-option value="0" label="B" key="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="适用区域" prop="country" label-width="150px" class="add-form-item form-item-disabled">
<el-select v-model="sarStandardsInfoEO.country" disabled >
<el-option v-for="opt in countryOptions" :value="opt.value === undefined ? '' :opt.value" :key="opt.value" :label="opt.label">{{ opt.label }}</el-option>
</el-select>
</el-form-item>
<el-form-item label="标准类别" prop="standSort" label-width="150px" class="add-form-item">
<el-select v-model="sarStandardsInfoEO.standSort" filterable>
<el-option
v-for="item in standSortOptions"
placeholder="请选择"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="标准编号" prop="standNumber" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standNumber"
placeholder="请输入标准编号"
clearable></el-input>
</el-form-item>
<el-form-item label="标准年份" prop="standYear" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standYear"
placeholder="请输入标准年份"
clearable></el-input>
</el-form-item>
<el-form-item label="中文名称" prop="standName" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standName"
placeholder="请输入中文名称"
clearable></el-input>
</el-form-item>
<el-form-item label="英文名称" prop="standEnName" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standEnName"
placeholder="请输入标准英文名称"
clearable></el-input>
</el-form-item>
<el-form-item title="“计划修订”、“修订中”均为现行有效版本；“已修订”标准的有效性根据实际实施情况判定。"
prop="standState" label-width="150px" class="add-form-item">
<template slot="label">文本状态<i class="el-icon-warning-outline"></i></template>
<el-select v-model="sarStandardsInfoEO.textStatus"
placeholder="请选择文本状态"
clearable>
<el-option
v-for="opt in standStateOptions"
:disabled="opt.value !== 'ZTXXYX' && opt.value !== standState && modalshowtitle !== '编辑国内标准'"
:key="opt.value"
:value="opt.value === undefined ? '' :opt.value" :label="opt.label"
>
{{ opt.label }}
</el-option>
</el-select>
</el-form-item>
<custom-date-pick-with-text2
:config="{
attrName: '发布日期',
attrField: 'issueTime'
}"
v-model="sarStandardsInfoEO.issueTime"
:disabled="formdisableflag"
></custom-date-pick-with-text2>
<!--</el-form-item>-->
<el-form-item label="文本说明" prop="synopsis" label-width="150px" class="add-form-item">
<el-input
type="text"
v-model="sarStandardsInfoEO.synopsis"
placeholder="请输入"
clearable
></el-input>
</el-form-item>
<!-- <el-form-item-->
<!-- prop="isRelateAccess"-->
<!-- label-width="150px"-->
<!-- class="add-form-item"-->
<!-- title="A类必填项多，仅A类可纳入法规清单。"-->
<!-- >-->
<!-- <template slot="label">重要度<i class="el-icon-warning-outline"></i></template>-->
<!-- <el-select v-model="sarStandardsInfoEO.isRelateAccess" @change="isRegulationsChange">-->
<!-- <el-option value="1" label="A" key="1"></el-option>-->
<!-- <el-option value="0" label="B" key="0"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="适用区域" prop="country" label-width="150px" class="add-form-item form-item-disabled">-->
<!-- <el-select v-model="sarStandardsInfoEO.country" disabled >-->
<!-- <el-option v-for="opt in countryOptions" :value="opt.value === undefined ? '' :opt.value" :key="opt.value" :label="opt.label">{{ opt.label }}</el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="文本说明" prop="synopsis" label-width="150px" class="add-form-item">-->
<!-- <el-input-->
<!-- type="text"-->
<!-- v-model="sarStandardsInfoEO.synopsis"-->
<!-- placeholder="请输入"-->
<!-- clearable-->
<!-- ></el-input>-->
<!-- </el-form-item>-->
<!-- 动态数据-->
<template v-for="(displayLocation, index) in dynamicFormField">
<el-col :span="24" :key="index">
<div class="divider-line">{{ displayLocation.label }}</div>
</el-col>
<template v-if="index === 0" >
<el-form-item label="标准类别" prop="standSort" label-width="150px" class="add-form-item">
<el-select v-model="sarStandardsInfoEO.standSort" filterable>
<el-option
v-for="item in standSortOptions"
placeholder="请选择"
:key="item.value"
:value="item.value"
:label="item.label"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="标准编号" prop="standNumber" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standNumber"
placeholder="请输入标准编号"
clearable></el-input>
</el-form-item>
<el-form-item label="标准年份" prop="standYear" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standYear"
placeholder="请输入标准年份"
clearable></el-input>
</el-form-item>
<el-form-item label="标准中文名称" prop="standName" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standName"
placeholder="请输入中文名称"
clearable></el-input>
</el-form-item>
<el-form-item label="标准英文名称" prop="standEnName" label-width="150px" class="add-form-item">
<el-input v-model="sarStandardsInfoEO.standEnName"
placeholder="请输入标准英文名称"
clearable></el-input>
</el-form-item>
<el-form-item prop="standNature" label-width="150px" class="add-form-item">
<template slot="label">标准性质</template>
<el-select v-model="sarStandardsInfoEO.standNature"
placeholder="请选择标准性质"
clearable>
<el-option
v-for="item in standNatureOptions"
placeholder="请选择"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</el-option>
</el-select>
</el-form-item>
<el-form-item title="“计划修订”、“修订中”均为现行有效版本；“已修订”标准的有效性根据实际实施情况判定。"
prop="standState" label-width="150px" class="add-form-item">
<template slot="label">文本状态<i class="el-icon-warning-outline"></i></template>
<el-select v-model="sarStandardsInfoEO.textStatus"
placeholder="请选择文本状态"
clearable>
<el-option
v-for="opt in standStateOptions"
:disabled="opt.value !== 'ZTXXYX' && opt.value !== standState && modalshowtitle !== '编辑国内标准'"
:key="opt.value"
:value="opt.value === undefined ? '' :opt.value" :label="opt.label"
>
{{ opt.label }}
</el-option>
</el-select>
</el-form-item>
<custom-date-pick-with-text2
:config="{
attrName: '发布日期',
attrField: 'issueTime'
}"
v-model="sarStandardsInfoEO.issueTime"
:disabled="formdisableflag"
></custom-date-pick-with-text2>
<!--</el-form-item>-->
<el-form-item
prop="isRelateAccess"
label-width="150px"
class="add-form-item"
>
<template slot="label">是否纳入认证清单</template>
<el-select v-model="sarStandardsInfoEO.isRelateAccess" @change="isRegulationsChange">
<el-option value="1" label="是" key="1"></el-option>
<el-option value="2" label="否" key="2"></el-option>
</el-select>
</el-form-item>
<el-form-item
prop="standSystem"
label-width="150px"
class="add-form-item"
>
<template slot="label">标准体系</template>
<tree-select
:data="standSystemOptions"
:defaultProps="defaultProps" :checkedKeys="defaultCheckedKeys"
:nodeKey="nodeKey" @popoverHide="popoverHide"></tree-select>
</el-form-item>
</template>
<template v-for="field in displayLocation.child">
<template v-if="field.attrField === 'EOPSSRQ'">
<custom-eop-date-pick
@@ -1013,6 +1053,7 @@ import CustomRoleTree from '@/components/CustomFormComponents/roleTree'
import Bus from '@/common/eventHub'
import CustomDatePickWithText2 from '@/components/CustomFormComponents/DatePickerWithText2'
import { interfaceUrl } from '@/sysConfig'
import TreeSelect from '@/components/treeSelect/treeSelect.vue';
export default {
name: 'domesticStandardsAndRegulations',
@@ -1032,7 +1073,8 @@ export default {
CustomDatePickWithText,
CustomSVPPS,
CustomRoleTree,
CustomDatePickWithText2
CustomDatePickWithText2,
TreeSelect
},
data () {
return {
@@ -1041,6 +1083,12 @@ export default {
children: 'children'
},
treeList: [],
defaultProps: {
children: 'children',
label: 'menuName'
},
nodeKey: 'id',
defaultCheckedKeys: [],
exportLoading : false,
visibleOrgTable: false,
orgTableVal: '',
@@ -1138,11 +1186,17 @@ export default {
stahndinfoList: [],
tableFlag: '',
countryOptions: [],
cysdOptions: [], // 我司参与深度下拉框
sycpxOptions: [], // 适用产品线下拉框
zrbmOptions: [], // 责任部门下拉框
zrgcsOptions: [], // 责任工程师下拉框
txlbOptions: [], // 体系类别下拉框
regionOptions: [], // 区域
standSortOptions: [], // 标准类别下拉框
standSortConfigOptions: [], // 标准类别下拉框
applyArcticOptions: [], // 适用车型下拉框
standStateOptions: [], // 文本状态下拉框
standSystemOptions: [], // 标准体系下拉框
standNatureOptions: [], // 标准性质下拉框
adoptExtentOptions: [], // 采标程度下拉框
emergyKindOptions: [], // 能源种类下拉框
@@ -1247,6 +1301,7 @@ export default {
applyArctic: '',
standNumber: '',
standYear: '',
standSystem: '',
standName: '',
standEnName: '',
standState: '',
@@ -1436,16 +1491,16 @@ export default {
{required: true, message: '中文名称不能为空', trigger: 'change'},
{type: 'string', max: 500, message: '中文名称不能超过500个字符', trigger: 'change'}
],
standEnName: [
{required: true, message: '英文名称不能为空', trigger: 'change'},
{type: 'string', max: 1000, message: '英文名称不能超过1000个字符', trigger: 'change'}
],
isRelateAccess: [
{ required: true, message: '重要度不能为空', trigger: 'change' }
],
issueTime:[
{required: true, message: '发布日期不能为空', trigger: 'change'}
]
// standEnName: [
// {required: true, message: '英文名称不能为空', trigger: 'change'},
// {type: 'string', max: 1000, message: '英文名称不能超过1000个字符', trigger: 'change'}
// ],
// isRelateAccess: [
// { required: true, message: '重要度不能为空', trigger: 'change' }
// ],
// issueTime:[
// {required: true, message: '发布日期不能为空', trigger: 'change'}
// ]
},
sarStandardsInfoRules: {
standSort: [
@@ -1598,6 +1653,12 @@ export default {
}
},
methods: {
popoverHide (checkedIds, checkedData) {
console.log(checkedIds);
console.log(checkedData);
this.sarStandardsInfoEO.standSystem = checkedData.id
console.log(this.sarStandardsInfoEO.standSystem);
},
closeModal () {
this.productModal = false
this.closeDrawer()
@@ -1833,7 +1894,8 @@ export default {
const [displayLocation] = values
const formFieldList = this.formFieldList
this.sarStandardsInfoEO = JSON.parse(JSON.stringify(item))
this.sarStandardsInfoEO.standSort = item.standSort
this.defaultCheckedKeys = [this.sarStandardsInfoEO.standSystem];
this.sarStandardsInfoEO.standSort = item.standSort
if (this.sarStandardsInfoEO.putTime != null && this.sarStandardsInfoEO.putTime !== '') {
this.sarStandardsInfoEO.putTime = this.sarStandardsInfoEO.putTime.replace(new RegExp(/-/gm), '/')
this.sarStandardsInfoEO.putTime = new Date(this.sarStandardsInfoEO.putTime)
@@ -2124,6 +2186,16 @@ export default {
}
})
},
// 查询所有菜单
selectStandardMenu () {
this.$http.get('lawss/sarMenuStandard', {
dicId: this.dictionaryId
}, {}, res => {
if (res.ok) {
this.data = res.data
}
})
},
// 树-删除
sureDeleteSarMenu () {
this.$confirm('是否删除?', '提示', {
@@ -2582,6 +2654,7 @@ export default {
if (flag) {
// 时间格式修改
let nowstandinfo = JSON.parse(JSON.stringify(this.sarStandardsInfoEO))
console.log(nowstandinfo)
if (nowstandinfo.putTime != null && nowstandinfo.putTime !== '') {
nowstandinfo.putTime = this.$dateFormat(this.sarStandardsInfoEO.putTime, 'yyyy-MM-dd hh:mm:ss')
}
@@ -2611,7 +2684,9 @@ export default {
sarStandAttrObj[item.attrField] = nowstandinfo[item.attrField]
})
nowstandinfo['sarStandAttrEOStr'] = JSON.stringify(sarStandAttrObj).replace(/"/g, "'")
this.$http.postData(this.addOrUPdateFlag === 1 ? 'sarStandardsInfo/sar-standards-info/addarStandardsInfo' : 'lawss/sarStandardsInfo/updateSarStandardsInfo', nowstandinfo, {
console.log(formFieldList)
console.log(nowstandinfo)
this.$http.postData(this.addOrUPdateFlag === 1 ? 'sarStandardsInfo/sar-standards-info/addarStandardsInfo' : 'sarStandardsInfo/sar-standards-info/updateSarStandardsInfo', nowstandinfo, {
_this: this
}, res => {
this.isSubmit = false
@@ -3596,7 +3671,7 @@ export default {
* 动态改变必填项
* */
isRegulationsChange (val) {
if (val === '0') {
if (val === '2') {
const formFieldList = this.formFieldList
const rules = {...this.defaultAddFormFieldRules}
formFieldList.forEach((item) => {
@@ -3807,28 +3882,31 @@ export default {
}
}
},
async mounted () {
created(){
},
async mounted () {
// 进入页面后查询树形结构目录
await this.selectMenu()
// 进入页面后查询标准体系树形结构目录
await this.selectStandardMenu()
this.treeReload = true
// 从数据库中查询各下拉框数据
this.$http.get('sys/dictype/getDicTypeListCode', '', {
_this: this
}, res => {
this.allSelectOptions = res.data || {}
this.countryOptions = res.data.COUNTRY
this.regionOptions = res.data.REGION // 区域
this.standSortOptions = res.data.STANDCLASSIFY
this.applyArcticOptions = res.data.PRODUCTTYPE // 根据需求文档，产品类别对应标准属性中的“适用车型”
this.standStateOptions = res.data.STANDSTATE
this.standNatureOptions = res.data.SARPROPERTY // 标准性质
this.adoptExtentOptions = res.data.DEGREESTANDARD
this.emergyKindOptions = res.data.ENERGYTYPES
this.applyAuthOptions = res.data.PROVETYPE // 适用认证下拉框
this.categoryOptions = res.data.CATEGORY // 能源种类
this.assemClassOptions = res.data.ASSEMCLASSIFY // 总成分类
this.categoryConfigOptions = res.data.CATEGORY
this.standAttributeList = res.data.RULETYPE
this.allSelectOptions = res.data || {}
this.standSortOptions = res.data.STANDCLASSIFY // 标准类别
this.standNatureOptions = res.data.SARPROPERTY // 标准性质
this.standStateOptions = res.data.WBZTCLASS // 文本状态
this.standSystemOptions = res.data.BZTXCLASS // 标准体系
this.applyArcticOptions = res.data.ENERGYTYPES // 适用车型
this.categoryOptions = res.data.NYLXCLASS // 能源类型
this.applyAuthOptions = res.data.SYRZCLASS // 适用认证
this.cysdOptions = res.data.WSCYSD // 我司参与深度
this.sycpxOptions = res.data.SYCPXCLASS // 适用产品线
this.zrbmOptions = res.data.ZRBMCLASS // 责任部门
this.zrgcsOptions = res.data.ZRGCSCLASS // 责任工程师
this.txlbOptions = res.data.TXLBCLASS // 体系类别
this.getGzzOption()
}, e => {
})