[update] 添加企标制修订流程

This commit is contained in:
lideqin
2023-10-19 18:18:51 +08:00
parent 9a3adf5b07
commit fd7a57f281
13 changed files with 1141 additions and 4 deletions
@@ -0,0 +1,133 @@
<template>
<j-modal
:title="$t('workCenter.enStandardRevision.addEditDrafter')"
:maskClosable="false"
:width="width"
:visible="visible"
switchFullscreen
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel">
<a-form :form="form">
<a-row :gutter="24">
<a-col :span="24">
<!-- 起草单位 -->
<a-form-item :label="$t('workCenter.enStandardRevision.draftingUnit')" :labelCol="labelCol" :wrapperCol="wrapperCol">
</a-form-item>
</a-col>
<a-col :span="24">
<!-- 起草人 -->
<a-form-item :label="$t('workCenter.enStandardRevision.drafter')" :labelCol="labelCol" :wrapperCol="wrapperCol">
</a-form-item>
</a-col>
<a-col :span="24">
<!-- 起草范围 -->
<a-form-item :label="$t('workCenter.enStandardRevision.draftingScope')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input :placeholder="$t('pleaseEnter') + $t('standardRegulationLibrary.standardDetail.standardNumber')"
@change="event => event.target.value = event.target.value.trim()"
:maxLength="50"
disabled
v-decorator="['draftingScope', validatorRules.draftingScope]" />
</a-form-item>
</a-col>
<a-col :span="24">
<!-- 截止时间 -->
<a-form-item :label="$t('deadline')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-date-picker :placeholder="$t('pleaseSelect') + $t('deadline')"
v-decorator="['quizTime', validatorRules.quizTime]"
showTime
style="width: 100%" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
export default {
name: 'AddEditDrafterDrawer',
data () {
return {
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
modal: {},
labelCol: {
xs: { span: 24 },
sm: { span: 8 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
longLabelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
longWrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
draftingUnit: {
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
validateTrigger: 'change'
},
drafter: {
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
validateTrigger: 'change'
},
draftingScope: {
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
validateTrigger: 'change'
},
deadline: {
rules: [{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }],
validateTrigger: 'change'
}
}
}
},
methods: {
add () {
this.edit({})
},
edit (record) {
this.visible = true
this.form.resetFields()
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'draftingUnit', 'drafter', 'draftingScope', 'deadline'))
})
},
handleOk () {
if (this.confirmLoading) return
this.form.validateFields((err, values) => {
if (!err) {
this.confirmLoading = true
this.$emit('ok', values)
this.confirmLoading = false
}
})
},
handleCancel () {
this.close()
},
close () {
this.model = {}
this.visible = false
}
}
}
</script>
<style scoped>
</style>
@@ -0,0 +1,369 @@
<template>
<a-form-model v-if="isFormInline" :model="formInline" class="form-add" :rules="rules" ref="ruleForm">
<div class="collapsible-panel-form">
<div class="form-flex-box collapsible-panel-form-content collapsible-content-no-head">
<!-- 制修订类型 -->
<div class="box-title-text form-flex-item">
<div class="title-text">
<span class="required">*</span>
<span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.typeOfRevision')">
{{ $t('workCenter.enterpriseInitChangePlan.typeOfRevision') }}
</span>
</div>
<a-form-model-item class="item-model" prop="typeOfRevision">
<a-select v-model="formInline.typeOfRevision"
:disabled="disabled"
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.typeOfRevision')">
<a-select-option :value="ApplicationCategory.INITIATION.value">{{ $t('workCenter.enterpriseInitChangePlan.standardProjectEstablishment') }}</a-select-option>
<a-select-option :value="ApplicationCategory.CHANGE.value">{{ $t('workCenter.enterpriseInitChangePlan.change') }}</a-select-option>
</a-select>
</a-form-model-item>
</div>
<!-- 是新建流程,新增企标编号字段,从企标计划选择 -->
<!-- 企标编号,选择企标计划 -->
<div v-if="flowInitType === 'newProcess'" class="box-title-text form-flex-item">
<div class="title-text">
<span class="required">*</span>
<span class="title-text-text" :title="$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')">
{{ $t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum') }}
</span>
</div>
<a-form-model-item class="item-model" prop="applicationCategory">
<enterprise-plan-selection type="radio"
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')"
v-model="formInline.standardPlanId"
:standard-number="formInline.standard_number"
:disabled="disabled"
@standardNumberChange="standardNumberChange"
@listChange="listChange"/>
</a-form-model-item>
</div>
<!--
标签管理中企标库的基础信息部分字段
1、去掉三个代号一个年代号
2、加零部件名称和代替标准号
3、企标编号如果是自动发起的就带入,从新建流程点入的话就从企标计划选择
4、从企标计划选择企标编号的话,把其他字段也回显
-->
<template v-for="(item, index) of dataList">
<div :key="index" class="box-title-text form-flex-item">
<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="applicationCategory">
<!-- 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="StandardSource.ENTERPRISE.value"
: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.trim="formInline[item.dbFieldName]"
:maxLength="50"
@change="event => event.target.value = event.target.value.trim()"
:placeholder="$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>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
</a-form-model>
</template>
<script>
import { getEnterpriseStandardAddForm } from '@/api/enterpriseStandardLibraryApi'
import { StandardSource, FieldType, ApplicationCategory } from '@/enums/commonEnums'
import { getAction } from '@/api/manage'
import { getFormDictTreeList } from '@/api/api'
import UserSelection from '@/components/selection/UserSelection'
import JMultipleDatePicker from '@/components/JMultipleDatePicker'
import StandardSelection from '@/components/selection/StandardSelection'
import UploadFile from '@/components/UploadFile'
import EnterprisePlanSelection from '@/components/selection/EnterprisePlanSelection'
export default {
name: 'BaseInfoForm',
components: { UserSelection, JMultipleDatePicker, StandardSelection, UploadFile, EnterprisePlanSelection },
props: {
// 流程发起类型,是自动发起(auto)的还是从新建流程发起的(newProcess)
flowInitType: {
type: String,
required: false,
default: ''
}
},
data () {
return {
StandardSource,
FieldType,
ApplicationCategory,
isFormInline: false, // 是否展示表单
disabledFieldList: ['standard_number'], // 不可修改字段
formInline: {},
rules: {},
disabled: false,
optionsData: {} // 标签管理中维护字段的下拉框数据
}
},
mounted () {
this.getForm()
},
methods: {
// 获取表单列表
getForm (callBack) {
this.confirmLoading = true
const params = {
module: StandardSource.ENTERPRISE.value,
type: 2
}
getEnterpriseStandardAddForm(params).then((res) => {
if (res.success) {
let dataList = res.result.基础信息
// 1、去掉三个代号一个年代号
dataList = dataList.filter(item => !['standard_code', 'name_code', 'category_code', 'year_number', 'standard_state'].includes(item.dbFieldName))
// 2、加零部件名称和代替标准号
dataList.push({
dbFieldEnName: 'Part name',
dbFieldName: 'part_name',
dbFieldNameOld: 'part_name',
dbFieldTxt: '零部件名称',
dictId: '1696821512600637441',
fieldMustInput: '1',
fieldShowType: '15'
})
dataList.push({
dbFieldEnName: 'Substitute Standard Number',
dbFieldName: 'substitute_standard_number',
dbFieldNameOld: 'substitute_standard_number',
dbFieldTxt: '代替标准号',
fieldMustInput: '0',
fieldShowType: '6'
})
// 3、企标编号如果是自动发起的就带入(文本框),从新建流程点入的话就从企标计划选择(选择企标计划组件)
if (this.flowInitType === 'newProcess') {
// 是新建流程,删除企标编号字段,在html中设置显示企标计划选择
if (dataList[0].dbFieldName === 'standard_number') {
dataList.shift()
}
}
this.dataList = dataList
this.ruleList = this.dataList
this.integrateData()
this.getOptionsData() // 获取下拉数据
callBack && callBack()
}
})
},
// 设置表单校验
integrateData () {
this.isFormInline = false
const ruleList = this.ruleList
const rules = {}
ruleList.forEach((res, index) => {
const rule = []
if (res.fieldMustInput === '1') {
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value, FieldType.TEXT_LINK.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 = this.dataList
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)
}
})
}
}
})
},
// 4、从企标计划选择企标编号的话,把其他字段也回显
standardNumberChange (value) {
this.formInline.standard_number = value
},
// 企标计划选择列表的回调
listChange (value) {
// 企标名称
// 标准英文名称
// 标准等级分类
// 企标体系
// 零部件名称
// 授权部门
// 代替标准号
// 发布日期
// 实施日期
// 是否试行
// 试行周期
// 编制说明
},
// 点击点击上传按钮
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 }
},
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.collapsible-content-no-head {
border-top: 1px solid #E5E6EB;
border-radius: 8px 8px 8px 8px;
}
</style>
@@ -0,0 +1,129 @@
<template>
<div>
<base-info-form ref="baseInfoForm" :flowInitType="flowInitType"></base-info-form>
<!-- 标准文本 -->
<div class="box-title-text form-flex-item">
<div class="title-text">
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
{{ $t('workCenter.enStandardRevision.standardText') }}
</span>
</div>
<a-form-model-item class="item-model">
<div class="online-edit-wrapper">
<!-- todo: 还不确定这里展示的是什么 -->
<p>企业标准</p>
<a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
</div>
</a-form-model-item>
</div>
<!-- 其他起草人 -->
<!-- 添加其他起草人 -->
<p>{{ $t('workCenter.enStandardRevision.addOtherDrafter') }}</p>
<!-- 操作区域 -->
<div v-if="!disabled" class="table-operator">
<!-- 新增 -->
<a-button icon="plus" type="primary" @click="handleAdd" :disabled="disabled">
{{ $t('newlyAdded') }}
</a-button>
</div>
<div>
<j-table
:can-drag="true"
:scroll="{x: '100%'}"
ref="table"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
<!-- 操作栏 -->
<div slot="action" slot-scope="{record, index}" class="action-span-cell">
<a @click="handleEdit(record, index)" class="table-ope-btn" :disabled="disabled">{{ $t('edit') }}</a>
<a-divider type="vertical" />
<a @click="handleDelete(record.id, index)" class="table-ope-btn" :disabled="disabled">{{ $t('delete') }}</a>
</div>
</j-table>
</div>
</div>
</template>
<script>
import JTable from '@/components/jero/JTable'
import BaseInfoForm from './BaseInfoForm'
export default {
name: 'MainDrafterSentBaseInfo',
components: { BaseInfoForm, JTable },
props: {
// 流程发起类型,是自动发起(auto)的还是从新建流程发起的(newProcess)
flowInitType: {
type: String,
required: false,
default: ''
}
},
data () {
return {
disabled: false,
data: {}, // 初始化获取的数据
}
},
methods: {
// 拿到外面传进来的数据初始化,因为套了几层就不在外层初始化数据了
initData (data) {
this.data = data
// 给表格赋值,在线编辑不知道要怎么赋值?
// this.dataSource =
// 给表单赋值
this.$nextTick(() => {
// this.$refs.baseInfoForm.formInline =
})
},
// 外层要获取数据
getData () {
// 把数据抛出,在线编辑不知道要不要抛
const data = {}
data.dataSource = this.dataSource
data.formInline = this.$refs.baseInfoForm.formInline
return data
},
// 外层获取数据要过校验,返回false表示没有通过校验
getDataValidate () {
if (this.dataSource && this.dataSource.length > 0) {
// 有数据可以抛出
const data = {}
data.dataSource = this.dataSource
data.formInline = this.$refs.baseInfoForm.formInline
return data
} else {
this.$message.warning(this.$t('addAtLeastOneRowOfData'))
return false
}
},
handleAdd () {}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
.collapsible-content-no-head {
border-top: 1px solid #E5E6EB;
border-radius: 8px 8px 8px 8px;
}
.online-edit-wrapper {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
p {
margin-bottom: 0;
height: 100%;
}
}
</style>
@@ -0,0 +1,29 @@
<template>
<div>
<!-- 标准文本 -->
<div class="box-title-text form-flex-item">
<div class="title-text">
<span class="title-text-text" :title="$t('workCenter.enStandardRevision.standardText')">
{{ $t('workCenter.enStandardRevision.standardText') }}
</span>
</div>
<a-form-model-item class="item-model">
<div class="online-edit-wrapper">
<!-- todo: 还不确定这里展示的是什么 -->
<p>企业标准</p>
<a-button type="primary">{{ $t('workCenter.enStandardRevision.onLineEditing') }}</a-button>
</div>
</a-form-model-item>
</div>
</div>
</template>
<script>
export default {
name: 'MainDrafterUploadMinuteBaseInfo'
}
</script>
<style scoped>
</style>