【中汽测试】树状结构加查询

This commit is contained in:
赵霄
2023-11-10 17:21:59 +08:00
parent 66ba1745d6
commit 1b40fbaef0
14 changed files with 252 additions and 542 deletions
+17
View File
@@ -867,6 +867,23 @@
.form-flex-item {
width: calc(100% / 3);
padding: 0 20px;
}
.custom-flex-form-item {
.ant-form-item {
display: flex;
.ant-form-item-label {
width: 9rem;
text-align: left;
}
.ant-form-item-control-wrapper {
flex: 1;
width: 0;
}
}
}
.collapsible-panel-form {
+4 -1
View File
@@ -1,6 +1,7 @@
module.exports = {
basicInformation: '基础信息',
personalInformation: '人员信息',
dispatchInformation: '业务分派信息',
// 新建流程页
newProcess: {
externalStandardsManagementProcess: '外部标准管理流程',
@@ -230,7 +231,9 @@ module.exports = {
standardConsultationProcess: {
standardText: '标准文本',
selectText: '选择文本',
selectionStandardFile: '选择标准文件'
selectionStandardFile: '选择标准文件',
relevantDocument: '相关文件',
endDate: '征求意见结束日期'
},
// 企标稽查计划
esInspectionPlan: {
-503
View File
@@ -1,503 +0,0 @@
<template>
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
<template v-for="(val,index) in dataList">
<div :key="index" class="collapsible-panel-form" v-if="val && val.length > 0">
<div class="collapsible-panel-form-header">
<span>{{ index }}</span>
<div class="retractable-btn" @click="handleChangeRetractable(index)">
<a-icon type="double-right" :class="retractableFlag[index] ? 'pack-up-btn' : 'unfold-btn'" />
{{ retractableFlag[index] ? '收起' : '展开' }}
</div>
</div>
<div class="form-flex-box collapsible-panel-form-content" v-show="retractableFlag[index]">
<template v-for="(item, index) in val">
<div :key="index"
class="box-title-text form-flex-item"
:class="{'form-flex-item-line': item.fieldShowType === FieldType.STANDARD_MORE.value}"
v-if="!hiddenFieldList.includes(item.dbFieldName)">
<div class="title-text">
<span class="required" v-if="item.fieldMustInput === '1'">*</span>
<span class="title-text-text" :title="item.dbFieldTxt">{{ item.dbFieldTxt }}</span>
</div>
<a-form-model-item class="item-model" :prop="item.dbFieldName">
<!-- 1, 日期单选 -->
<a-date-picker v-if="item.fieldShowType === FieldType.DATE_SINGLE.value"
class="box-input"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:getCalendarContainer="(trigger) => trigger.parentNode"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
style="width: 100%" />
<!-- 2, 单选用户 -->
<user-selection v-else-if="item.fieldShowType === FieldType.USER_SINGLE.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
:filedName="item.dbFieldName"
@nameChange="userSelectNameChange"
:nameStr="formInline[item.dbFieldName + '_dictText']"
type="radio"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
<!-- 3, 单选组织机构 -->
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value"
v-model="formInline[item.dbFieldName]"
:backDepart="true" />
<!-- 4, 日期多选 -->
<j-multiple-date-picker v-else-if="item.fieldShowType === FieldType.DATE_MORE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:fieldName="item.dbFieldName"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
<!-- 5, 多行文本 -->
<a-textarea v-else-if="item.fieldShowType === FieldType.TEXTAREA.value"
:placeholder="$t('pleaseEnter')+item.dbFieldTxt"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:maxLength="500"
v-model="formInline[item.dbFieldName]" :rows="4" />
<!-- 6, 标准多选 -->
<standard-selection v-else-if="item.fieldShowType === FieldType.STANDARD_MORE.value"
:source="flag"
:disabledSourceSearch="true"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]" />
<!-- 7, 多选组织机构 -->
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
v-model="formInline[item.dbFieldName]"
:multi="true"
:backDepart="true"
:treeOpera="true" />
<!-- 8, 上传文件 -->
<a-button v-else-if="item.fieldShowType === FieldType.FILE_UP.value" type="primary" class="button-text"
@click="clickButtonToUpload(item)">
{{
(formInline[item.dbFieldName] === 'null' || formInline[item.dbFieldName] === ''
|| formInline[item.dbFieldName] === null || formInline[item.dbFieldName] === undefined)
? $t('uploadFile.clickUpload')
: $t('uploadFile.viewUploadedFiles')
}}
</a-button>
<!-- 9, 文本框 -->
<a-input v-else-if="item.fieldShowType === FieldType.TEXT_BOX.value"
class="box-input"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]"
:maxLength="50"
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseEnter')+item.dbFieldTxt" />
<!-- 10, 下拉单选数据字典 -->
<j-dict-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false"
:dictCode="item.dictField" />
<!-- 11, 下拉多选数据字典 -->
<j-multi-select-tag v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value"
class="box-input"
v-model="formInline[item.dbFieldName]"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'"
:triggerChange="false"
:dictCode="item.dictField" />
<!-- 12, 树选择 -->
<a-tree-select
v-else-if="item.fieldShowType === FieldType.TREE.value"
v-model="formInline[item.dbFieldName]"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
tree-checkable
treeCheckStrictly
:label-in-value="false"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!-- 14, 年份选择 -->
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
show-type="year"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
v-model="formInline[item.dbFieldName]"
:default-value="defaultValue[item.dbFieldName]"
date-format="YYYY"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!-- 15, 树选择单选 -->
<a-tree-select v-else-if="item.fieldShowType === FieldType.TREE_SINGLE.value"
v-model="formInline[item.dbFieldName]"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
style="width: 100%"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
:label-in-value="false"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
</a-form-model-item>
</div>
</template>
</div>
</div>
</template>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
</a-form-model>
</template>
<script>
import UserSelection from './selection/UserSelection.vue'
import JMultipleDatePicker from './JMultipleDatePicker.vue'
import StandardSelection from './selection/StandardSelection.vue'
import JDictSelectTag from './dict/JDictSelectTag.vue'
import JMultiSelectTag from './dict/JMultiSelectTag.vue'
import UploadFile from './UploadFile.vue'
import { FieldType } from '../enums/commonEnums.js'
import { getAction } from '../api/manage.js'
import { getFormDictTreeList } from '../api/api.js'
export default {
name: 'CollapsiblePanelForm',
components: { UserSelection, JMultipleDatePicker, StandardSelection, JDictSelectTag, JMultiSelectTag, UploadFile },
props: {
// 获取表单数据的方法
getFormFunc: {
type: Function,
required: false,
default: () => {
return function () {
}
}
},
// 获取详细信息的方法
getDocumentInfoFunc: {
type: Function,
required: false,
default: () => {
return function () {
}
}
},
// 标准模块的区分:1,国内; 2,国外;3,企标
flag: {
type: String,
default: null
},
disabled: {
type: Boolean,
default: false
},
// 特殊的placeholder,目前只处理了输入框,有需要再处理别的
specialPlaceholder: {
type: Object,
required: false,
default: () => {
return {}
}
},
// 默认值
defaultValue: {
type: Object,
required: false,
default: () => {
return {}
}
},
// 不可修改值
disabledFieldList: {
type: Array,
required: false,
default: () => {
return []
}
},
// 需要隐藏的字段
hiddenFieldList: {
type: Array,
required: false,
default: () => {
return []
}
},
// 是否可收起
isRetractable: {
type: Boolean,
required: false,
default: true
}
},
data () {
return {
FieldType,
loading: false,
formInline: {},
isFormInline: false,
rules: {},
confirmLoading: false,
type: 2,
dataList: [],
ruleList: [],
uploadName: '',
optionsData: {}, // 用接口获取到的下拉数据
retractableFlag: {} // 面板展开收起的标识
}
},
created () {
if (this.$route.query.id) {
this.edit()
} else {
this.add()
}
},
methods: {
add () {
this.formInline = Object.assign({}, this.defaultValue)
this.$forceUpdate()
this.getForm()
},
edit () {
this.loading = true
this.getForm(() => {
if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
this.loading = false
return
}
// type标识是新增表单还是详情页
this.getDocumentInfoFunc({ id: this.$route.query.id.id, type: this.type }).then((res) => {
if (res.success) {
// 处理树结构多选回显
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
const treeMultipleField = formList.filter(tt => tt.fieldShowType === FieldType.TREE.value)
this.formInline = res.result
treeMultipleField.forEach(field => {
const valueArr = []
if (this.formInline[field.dbFieldName]) {
const values = this.formInline[field.dbFieldName].split(',')
for (let i = 0; i < values.length; i++) {
valueArr[i] = {
value: values[i]
}
}
this.formInline[field.dbFieldName] = valueArr
} else {
this.formInline[field.dbFieldName] = undefined
}
})
const dictField = formList.filter(tt => tt.fieldShowType === FieldType.OPTION_SINGLE.value)
dictField.forEach(field => {
this.formInline[field.dbFieldName] = this.formInline[field.dbFieldName] || null
})
this.loading = false
} else {
this.loading = false
}
})
})
},
// 获取表单列表
getForm (callBack) {
if (!this.getFormFunc || typeof this.getFormFunc !== 'function') {
return
}
this.confirmLoading = true
const params = {
module: this.flag,
type: this.type
}
this.getFormFunc(params).then((res) => {
if (res.success) {
this.dataList = res.result
this.ruleList = res.result
this.integrateData()
this.getOptionsData() // 获取下拉数据
Object.keys(this.dataList).forEach(key => {
this.retractableFlag[key] = true
})
callBack && callBack()
}
})
},
// 设置表单校验
integrateData () {
this.isFormInline = false
const ruleList = []
for (const item in this.ruleList) {
this.ruleList[item].forEach(ol => {
ruleList.push(ol)
})
}
const rules = {}
ruleList.forEach((res, index) => {
const rule = []
if (res.fieldMustInput === '1') {
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
rule.push({
required: true,
message: res.dbFieldTxt + this.$t('cannotEmpty'),
trigger: 'blur'
})
} else if (res.fieldShowType === FieldType.DATE_SINGLE.value) {
// 解决第一次校验不消失的问题
rule.push({
required: true,
message: res.dbFieldTxt + this.$t('cannotEmpty'),
trigger: ['change', 'blur']
})
} else {
rule.push({
required: true,
message: res.dbFieldTxt + this.$t('cannotEmpty'),
trigger: 'change'
})
}
}
if (rule.length > 0) {
rules[res.dbFieldName] = rule
}
})
this.rules = rules
this.isFormInline = true
this.confirmLoading = false
},
/**
* 处理需要通过接口获取的下拉数据
*/
getOptionsData () {
const formList = Object.values(this.dataList).reduce((acc, cur) => acc.concat(cur), [])
formList.forEach(item => {
if (item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) {
// 展示类型是树选择,且有接口的
if (item.fieldHref) {
getAction(item.fieldHref).then(res => {
if (res.success) {
this.$set(this.optionsData, item.dbFieldName, res.result)
}
})
} else if (item.dictId) {
getFormDictTreeList({ dictId: item.dictId }).then(res => {
if (res.success) {
this.$set(this.optionsData, item.dbFieldName, res.result)
}
})
}
}
})
},
// 点击点击上传按钮
clickButtonToUpload (item) {
this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
this.uploadName = item.dbFieldName
},
// 文件上传改变后的回调
uploadFileChange (data) {
const attIdList = []
if (data && data.length > 0) {
data.map(item => {
attIdList.push(item.id)
})
}
/** 赋值给当前对应的表单文件 */
this.formInline[this.uploadName] = attIdList.join(',')
this.formInline = { ...this.formInline }
},
// 标准选择变化
standardSelectionChange (value, id) {
// this.formInline[value + '_by'] = id
this.formInline = { ...this.formInline }
},
// 选择用户得到用户名
userSelectNameChange (value, fieldName) {
this.formInline[fieldName + '_dictText'] = value
},
submit () {
this.$refs.ruleForm.validate(valid => {
if (valid) {
const formInline = JSON.parse(JSON.stringify(this.formInline))
Object.keys(formInline).forEach(res => {
if (formInline[res] instanceof Array) {
if (formInline[res][0] instanceof Object) {
// 说明是树选择
formInline[res] = formInline[res].map(item => item.value).join(',')
} else {
formInline[res] = formInline[res].join(',')
}
}
})
this.$emit('submitFormData', formInline)
} else {
this.$emit('addFormWarning')
return false
}
})
},
clearValidate () {
this.$refs.ruleForm.clearValidate()
},
handleChangeRetractable (key) {
this.$set(this.retractableFlag, key, !this.retractableFlag[key])
this.$forceUpdate()
}
}
}
</script>
<style scoped lang="less">
/deep/ .ant-form-item-children {
width: 100%;
display: inline-block;
}
.form-flex-box {
display: flex;
flex-wrap: wrap;
}
.form-flex-item-line {
width: 100%;
}
.collapsible-panel-form {
margin-top: 20px;
&-header {
height: 56px;
line-height: 56px;
background: rgba(245, 245, 245, 0.6);
border-radius: 8px 8px 0 0;
border: 1px solid #E5E6EB;
padding: 0 20px;
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
font-weight: 600;
color: #1D2129;
display: flex;
justify-content: space-between;
.retractable-btn {
cursor: pointer;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
color: @primary-color;
}
.anticon {
margin-right: 8px;
}
.pack-up-btn {
transform: rotate(-90deg);
}
.unfold-btn {
transform: rotate(90deg);
}
}
&-content {
border: 1px solid #E5E6EB;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 20px;
}
}
.form-flex-item {
width: calc(100% / 3);
}
</style>
+9 -1
View File
@@ -111,6 +111,8 @@
tree-checkable
treeCheckStrictly
:label-in-value="false"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!-- 14, 年份选择 -->
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
@@ -128,6 +130,8 @@
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
:label-in-value="false"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!--16树形弹框选择-->
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
@@ -636,7 +640,11 @@ export default {
},
getFlag (fieldName) {
return this.flagByField[fieldName] || this.flag
}
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
}
</script>
+25 -3
View File
@@ -16,6 +16,8 @@
:getPopupContainer="triggerNode=> triggerNode.parentNode"
:tree-data="optionsData[item.dbFieldName]"
tree-checkable
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
/>
</a-form-item>
@@ -29,6 +31,8 @@
:maxTagCount="1"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
:tree-data="optionsData[item.dbFieldName]"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
/>
</a-form-item>
@@ -74,7 +78,7 @@
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'" :maxTagCount="1"
:triggerChange="false" :dictCode="item.dictField"/>
:triggerChange="false" :dictCode="item.dictField" />
</a-form-item>
</template>
<!-- 组织机构选择 -->
@@ -89,6 +93,8 @@
class="box-input"
style="width: 100%"
:tree-data="categoryTreeList"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
/>
</a-form-item>
@@ -108,6 +114,8 @@
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
treeCheckable
treeCheckStrictly
show-search
:filterTreeNode="filterTreeOption"
/>
</a-form-item>
</template>
@@ -141,6 +149,8 @@
tree-checkable
treeCheckStrictly
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
show-search
:filterTreeNode="filterTreeOption"
/>
</a-form-item>
</template>
@@ -154,6 +164,8 @@
:getPopupContainer="triggerNode=> triggerNode.parentNode"
:tree-data="optionsData[item.dbFieldName]"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
show-search
:filterTreeNode="filterTreeOption"
/>
</a-form-item>
</template>
@@ -179,6 +191,8 @@
style="width: 100%"
:tree-data="categoryTreeList"
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
show-search
:filterTreeNode="filterTreeOption"
/>
</a-form-item>
</template>
@@ -197,6 +211,7 @@
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
treeCheckable
treeCheckStrictly
:filterTreeNode="filterTreeOption"
/>
</a-form-item>
</template>
@@ -223,7 +238,7 @@
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
:type="'select'" :maxTagCount="1"
:triggerChange="false" :dictCode="item.dictField"/>
:triggerChange="false" :dictCode="item.dictField" />
</a-form-item>
</template>
<!-- 年份选择 -->
@@ -244,7 +259,10 @@
{{ !toggleSearchStatus ? $t('open') : $t('putAway') }}
<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
</a>
<a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{ $t('query') }}</a-button>
<a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{
$t('query')
}}
</a-button>
<a-button icon="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
</div>
</a-row>
@@ -396,6 +414,10 @@ export default {
},
handleToggleSearch () {
this.toggleSearchStatus = !this.toggleSearchStatus
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
+16
View File
@@ -116,4 +116,20 @@ export default class EsEnum {
}
return []
}
/**
* 根据value获取key
*/
keyOfValue(value) {
if (!value && value!== 0) {
return null
}
for (const i in this){
const e = this[i]
if (e.value !== undefined && e.value !== null && e.value.toString() === value.toString()) {
return i
}
}
return null
}
}
+10 -1
View File
@@ -167,7 +167,9 @@ export const ProcessKey = {
// 已封存企标启用流程
ES_ENABLE: { text: 'es-enable', value: 'es-enable' },
// 标准法规入库/变更流程
FB_ENTRY_CHANGE: { text: 'fb-entry-change', value: 'fb-entry-change' }
FB_ENTRY_CHANGE: { text: 'fb-entry-change', value: 'fb-entry-change' },
// 征求意见流程
CONSULTATION: { text: 'fb-standard-consultation', value: 'fb-standard-consultation' }
}
// 标准性质
@@ -202,3 +204,10 @@ export const FGEntryChangeProcessNode = new EsEnums({
initiate: { text: '法规工程师发起', value: '1', btn: ['save', 'submit'] },
approve: { text: '审批', value: '审批', btn: ['return', 'save', 'agree', 'reject'] }
})
// 标准征求意见流程
export const ConsultationProcess = new EsEnums({
initiate: { text: '法规工程师发起', value: '1', btn: ['save', 'submit'] },
distribute: { text: '各部所主管级领导分发', value: '2', btn: ['return', 'save', 'submit'] },
audit: { text: '审批', value: '3', btn: ['return', 'save', 'agree', 'reject'] }
})
@@ -26,6 +26,8 @@
style="width: 100%"
:tree-data="countriesInvolvedOptions"
:label-in-value="false"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.countriesInvolved')" />
</a-form-item>
</a-col>
@@ -187,7 +189,11 @@ export default {
this.$refs.modalForm.edit(id)
this.$refs.modalForm.title = this.$t('details')
this.$refs.modalForm.disableSubmit = false
}
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
}
</script>
@@ -39,6 +39,8 @@
:replace-fields="{key: 'value'}"
:label-in-value="false"
disabled
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+$t('docTool.customComparison.countriesInvolved')" />
</a-form-item>
<!--是否公开-->
@@ -610,6 +612,10 @@ export default {
compareResult: record.compareResult
}
this.$refs.resultModal.open(params)
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
@@ -136,6 +136,8 @@
treeCheckStrictly
:label-in-value="false"
@change="updateDom"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
<!-- 14, 年份选择 -->
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
@@ -154,6 +156,8 @@
:tree-data="optionsData[item.dbFieldName]"
:label-in-value="false"
@change="updateDom"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
</a-form-model-item>
</div>
@@ -692,6 +696,10 @@ export default {
},
updateDom () {
this.$forceUpdate()
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
@@ -130,6 +130,8 @@
tree-checkable
treeCheckStrictly
:label-in-value="false"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
<!-- 14, 年份选择 -->
<j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
@@ -147,6 +149,8 @@
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
:tree-data="optionsData[item.dbFieldName]"
:label-in-value="false"
show-search
:filterTreeNode="filterTreeOption"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"/>
</a-form-model-item>
</div>
@@ -433,6 +437,10 @@ export default {
if (item.id) {
this.deleteIds.push(item.id)
}
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
}
}
@@ -39,6 +39,7 @@
v-model="queryParam.responsibleDepartment"
:maxTagCount="1"
:show-search="true"
:filterTreeNode="filterTreeOption"
:getPopupContainer="triggerNode=> triggerNode.parentNode"
class="box-input"
style="width: 100%"
@@ -256,7 +257,11 @@ export default {
},
handleDepartsChange () {
this.$forceUpdate()
}
},
filterTreeOption (input, option) {
const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
},
}
}
</script>
@@ -1,5 +1,5 @@
<template>
<internal-detail-page :content-padding="0" :title="pageTitle">
<internal-detail-page :content-padding="0" :title="pageTitle" :loading="loading">
<!-- 标题右侧tab -->
<template v-slot:titleRightCustom>
<div class="table-operator-tab">
@@ -22,22 +22,23 @@
<a-row>
<a-col :span="12">
<!--流程名称-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
<a-form-item :labelCol="twoLabelCol" :wrapperCol="twoWrapperCol" :label="$t('processName')">
<a-input :placeholder="$t('pleaseEnter') + $t('processName')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
disabled
v-decorator="['nodeName']" />
v-decorator="['processName']" />
</a-form-item>
</a-col>
<a-col :span="12">
<!--截止日期-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
<a-form-item :labelCol="twoLabelCol" :wrapperCol="twoWrapperCol" :label="$t('expirationDate')">
<a-date-picker class="box-input"
:placeholder="$t('pleaseSelect') + $t('expirationDate')"
:getCalendarContainer="(trigger) => trigger.parentNode"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
v-decorator="['processDueDate']"
style="width: 100%" />
</a-form-item>
</a-col>
@@ -48,36 +49,37 @@
@change="event => event.target.value = event.target.value.trim()"
:maxLength="500"
type="textarea"
v-decorator="['nodeName']" />
v-decorator="['processDescription']" />
</a-form-item>
</a-form>
<!--业务基本信息-->
<div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
<a-form :form="basicServiceInfoForm">
<a-row>
<a-col :span="12">
<div class="form-flex-box">
<div class="form-flex-item custom-flex-form-item">
<!--标准编号-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
<standard-selection v-decorator="['nodeName']" :placeholder="$t('pleaseSelect') + $t('standardNumber')" />
<a-form-item :label="$t('standardNumber')">
<standard-selection v-decorator="['standardNumber', validatorRules.standardNumber]"
:placeholder="$t('pleaseSelect') + $t('standardNumber')" />
</a-form-item>
</a-col>
<a-col :span="12">
</div>
<div class="form-flex-item custom-flex-form-item">
<!--标准名称-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
<a-form-item :label="$t('standardName')">
<a-input :placeholder="$t('pleaseEnter') + $t('standardName')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
disabled
v-decorator="['nodeName']" />
v-decorator="['standardName', validatorRules.standardName]" />
</a-form-item>
</a-col>
<a-col :span="12">
</div>
<div class="form-flex-item custom-flex-form-item">
<!--标准文本-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.standardConsultationProcess.standardText')">
<a-form-item :label="$t('workCenter.standardConsultationProcess.standardText')">
<div class="box-title-text">
<a-input class="box-input"
v-decorator="['nodeName']"
v-decorator="['standardText', validatorRules.standardText]"
readonly
:placeholder="$t('pleaseSelect') + $t('workCenter.standardConsultationProcess.standardText')" />
<a-button type="primary" class="button-box" @click="chooseStandardText">
@@ -85,22 +87,67 @@
</a-button>
</div>
</a-form-item>
</a-col>
</a-row>
</div>
<div class="form-flex-item custom-flex-form-item">
<!--相关文件-->
<a-form-item :label="$t('workCenter.standardConsultationProcess.relevantDocument')">
<j-upload return-id v-decorator="['relatedFile', validatorRules.relatedFile]" />
</a-form-item>
</div>
<div class="form-flex-item custom-flex-form-item">
<!--征求意见结束日期-->
<a-form-item :label="$t('workCenter.standardConsultationProcess.endDate')">
<j-date show-type="day" v-decorator="['consultationDueDate', validatorRules.consultationDueDate]" />
</a-form-item>
</div>
</div>
</a-form>
<!--业务分派信息-->
<template v-if="showDispatchInformation">
<div class="process-part-title">{{ $t('workCenter.dispatchInformation') }}</div>
<a-form :form="dispatchInfoForm"></a-form>
</template>
<!--流程审批信息-->
<div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
<a-form :form="approvalInfoForm">
<!--备注-->
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
<a-input :placeholder="$t('pleaseEnter') + $t('remarks')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="500"
type="textarea"
v-decorator="['handleText']" />
</a-form-item>
<!--附件-->
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
<j-upload v-decorator="['handleFile']" return-id />
</a-form-item>
</a-form>
</div>
<div class="detail-page-bottom-operate-box">
<!--转办 审批节点存在-->
<a-button type="primary" :loading="loading" ghost icon="arrow-up" @click="handleTurnTo">{{ $t('turnTo') }}</a-button>
<a-button type="primary" :loading="loading" ghost icon="arrow-up" v-if="btnList.includes('return')" @click="handleTurnTo">
{{ $t('turnTo') }}
</a-button>
<!--保存 发起节点审批节点都存在-->
<a-button type="primary" :loading="loading" ghost @click="handleSave"><i class="iconfont icon-save" />{{ $t('preservation') }}</a-button>
<a-button type="primary" :loading="loading" ghost v-if="btnList.includes('save')" @click="handleSave">
<i class="iconfont icon-save" />{{ $t('preservation') }}
</a-button>
<!--提交 发起节点存在-->
<a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
<a-button type="primary" :loading="loading" @click="handleSubmit" v-if="btnList.includes('submit')" icon="upload">
{{ $t('submit') }}
</a-button>
<!--同意 审批节点存在-->
<a-button type="primary" :loading="loading" icon="check-circle" @click="handleSubmit">{{ $t('agree') }}</a-button>
<a-button type="primary" :loading="loading" icon="check-circle" v-if="btnList.includes('agree')" @click="handleSubmit">
{{ $t('agree') }}
</a-button>
<!--驳回 审批节点存在-->
<a-button type="primary" :loading="loading" icon="close-circle" @click="handleSubmit">{{ $t('reject') }}</a-button>
<a-button type="primary" :loading="loading" icon="close-circle" v-if="btnList.includes('reject')" @click="handleSubmit">
{{ $t('reject') }}
</a-button>
</div>
</internal-detail-page>
</template>
@@ -108,6 +155,7 @@
<script>
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
import StandardSelection from '../../../components/selection/StandardSelection.vue'
import { ConsultationProcess } from '../../../enums/commonEnums'
export default {
name: 'StandardConsultationProcess',
@@ -115,11 +163,11 @@ export default {
data () {
return {
switchValue: 'base',
labelCol: {
twoLabelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
twoWrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
@@ -131,15 +179,72 @@ export default {
xs: { span: 24 },
sm: { span: 22 }
},
// 流程信息表单
// 流程信息
processInfoForm: this.$form.createForm(this),
// 业务基本信息表单
basicServiceInfoForm: this.$form.createForm(this)
// 业务基本信息
basicServiceInfoForm: this.$form.createForm(this),
// 流程审批信息
approvalInfoForm: this.$form.createForm(this),
// 业务分派信息
dispatchInfoForm: this.$form.createForm(this),
validatorRules: {
// 标准编号
standardNumber: {
rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardSelect.standardNumber') }],
validateTrigger: 'change'
},
// 标准名称
standardName: {
rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('standardName') }],
validateTrigger: 'blur'
},
// 标准文本
standardText: {
rules: [{
required: true,
message: this.$t('pleaseSelect') + this.$t('workCenter.standardConsultationProcess.standardText')
}],
validateTrigger: 'change'
},
// 相关文件
relatedFile: {
rules: [{
required: false,
message: this.$t('uploadFile.pleaseUpload') + this.$t('workCenter.standardConsultationProcess.relevantDocument')
}],
validateTrigger: 'change'
},
// 征求意见结束日期
consultationDueDate: {
rules: [{
required: true,
message: this.$t('pleaseSelect') + this.$t('workCenter.standardConsultationProcess.endDate')
}],
validateTrigger: 'change'
}
},
btnList: [], // 显示的按钮
loading: false,
currentNode: '2',
nodeEnumsKey: null // 当前节点对应枚举的key
}
},
computed: {
pageTitle () {
return `${this.$t('flowCenter')}${this.$route.meta.title}(法规工程师发起)`
return `${this.$t('flowCenter')}${this.$route.meta.title}`
},
// 是否展示业务分派信息
showDispatchInformation () {
return this.currentNode === ConsultationProcess.distribute.value
}
},
created () {
// 有流程id或者草稿id点进来的
if (this.$route.query.processInstanceId || this.$route.query.draftId) {
} else {
this.nodeEnumsKey = ConsultationProcess.keyOfValue(this.currentNode) || 'audit'
this.btnList = ConsultationProcess[this.nodeEnumsKey].btn
}
},
methods: {
@@ -457,7 +457,7 @@ export default {
}
},
created () {
if (this.$route.query.processInstanceId) {
if (this.$route.query.processInstanceId || this.$route.query.draftId) {
this.disabled = true
this.initProcessData()
} else {