[update] 修改企标流程样式

This commit is contained in:
lideqin
2023-11-23 16:41:08 +08:00
parent edb1a3404e
commit 2a8ba6c47c
25 changed files with 1393 additions and 1576 deletions
@@ -1,185 +1,183 @@
<template>
<a-spin :spinning="loading">
<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')">
<a-form-model v-if="isFormInline" :model="formInline" :rules="rules" ref="ruleForm">
<div class="form-flex-box">
<!-- 制修订类型 -->
<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">
<j-dict-select-tag
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.typeOfRevision')"
dict-code="esp_revision_type"
disabled
v-model="formInline.typeOfRevision">
</j-dict-select-tag>
</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')">
<a-form-model-item class="item-model" prop="typeOfRevision">
<j-dict-select-tag
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.typeOfRevision')"
dict-code="esp_revision_type"
disabled
v-model="formInline.typeOfRevision">
</j-dict-select-tag>
</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"
@listChange="listChange"
:disabled="disabled"/>
</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">
<enterprise-plan-selection type="radio"
:placeholder="$t('pleaseSelect')+$t('workCenter.enterpriseInitChangePlan.enterpriseStandardNum')"
v-model="formInline.standardPlanId"
:standard-number="formInline.standard_number"
@listChange="listChange"
:disabled="disabled"/>
<!-- 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" />
<!--16树形弹框选择-->
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
@nameChange="treeSelectNameChange"
:filedName="item.dbFieldName"
type="checkbox"
:nameStr="formInline[item.dbFieldName + '_dictText']"
:dict-id="item.dictId"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
</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" />
<!--16树形弹框选择-->
<tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
v-model="formInline[item.dbFieldName]"
@nameChange="treeSelectNameChange"
:filedName="item.dbFieldName"
type="checkbox"
:nameStr="formInline[item.dbFieldName + '_dictText']"
:dict-id="item.dictId"
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
</a-form-model-item>
</div>
</template>
</div>
</template>
</div>
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
</a-form-model>
@@ -403,8 +401,4 @@ export default {
<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>