Initial commit
This commit is contained in:
danshihao
@@ -0,0 +1,890 @@
|
||||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-form-model :model="formInline" v-if="isFormInline" class="form-add" :rules="rules" ref="ruleForm">
|
||||
<div v-for="(val,index) in dataList" :key="index">
|
||||
<div v-if="val && val.length > 0" class="header-text">{{ index }}</div>
|
||||
<div v-if="val && val.length > 0" class="form-flex-box">
|
||||
<template v-for="(item, index) in val">
|
||||
<div :key="index"
|
||||
class="box-title-text form-flex-item-half"
|
||||
: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' || rules[item.dbFieldName][0].required">*</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"
|
||||
:placeholder="specialPlaceholder[item.dbFieldName] || $t('pleaseSelectStandard')"
|
||||
:source="getFlag(item.dbFieldName)"
|
||||
:disabledSourceSearch="!selectStandardCanUpdateTypeField.includes(item.dbFieldName)"
|
||||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||||
:exclude-standard-numbers="excludeStandardFields.includes(item.dbFieldName) ? excludeStandardNumbers : null"
|
||||
v-model="formInline[item.dbFieldName]" />
|
||||
<!-- 7, 多选组织机构 -->
|
||||
<j-select-depart v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value"
|
||||
v-model="formInline[item.dbFieldName]"
|
||||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName) || innerDisabledField.includes(item.dbFieldName)"
|
||||
:selectRange="item.dbFieldName === 'auth_dept' ? departSelectRange : []"
|
||||
: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="item.dbLength"
|
||||
: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) || innerDisabledField.includes(item.dbFieldName)"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:type="'select'"
|
||||
:triggerChange="false"
|
||||
:options="optionsData[item.dbFieldName]"
|
||||
:dictCode="item.fieldHref || dictNotCodes.includes(item.dbFieldName) ? null : 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"
|
||||
:options="optionsData[item.dbFieldName]"
|
||||
:openSelectedAll="openSelectedAllFieldList.includes(item.dbFieldName)"
|
||||
:dictCode="item.fieldHref ? null : item.dictField" />
|
||||
<!-- 12, 树选择 -->
|
||||
<s-tree-select
|
||||
v-else-if="item.fieldShowType === FieldType.TREE.value"
|
||||
v-model="formInline[item.dbFieldName]"
|
||||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
|
||||
:tree-data="optionsData[item.dbFieldName]"
|
||||
tree-checkable
|
||||
treeCheckStrictly
|
||||
: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, 树选择（单选） -->
|
||||
<s-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"
|
||||
:options-href="item.fieldHref"
|
||||
:nameStr="formInline[item.dbFieldName + '_dictText']"
|
||||
:dict-id="item.dictId"
|
||||
:disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
|
||||
</a-form-model-item>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<upload-file ref="uploadFile" @change="uploadFileChange" :return-url="false"></upload-file>
|
||||
</a-form-model>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@assets/less/common.less'
|
||||
import JDictSelectTag from '../dict/JDictSelectTag'
|
||||
import JMultiSelectTag from '../dict/JMultiSelectTag'
|
||||
import UploadFile from '../UploadFile'
|
||||
// 选择标准选择器
|
||||
import StandardSelection from '../selection/StandardSelection'
|
||||
import {
|
||||
FieldType,
|
||||
StandardGradeClassify,
|
||||
StandardProperty,
|
||||
IsTrial,
|
||||
EnterpriseStandardStatus,
|
||||
StandardSource,
|
||||
StandardStatus, EnterpriseStandardCode, EnterpriseNameCode
|
||||
} from '../../enums/commonEnums'
|
||||
import JMultipleDatePicker from '../JMultipleDatePicker'
|
||||
import UserSelection from '../selection/UserSelection'
|
||||
import { getAction } from '../../api/manage.js'
|
||||
import { ajaxGetDictItems, getDictByCode, getFormDictTreeList } from '../../api/api.js'
|
||||
import TreeSelection from '../selection/TreeSelection'
|
||||
import { getStandardGradeClassification } from '../../api/enterpriseStandardLibraryApi'
|
||||
import STreeSelect from '../STreeSelect'
|
||||
|
||||
export default {
|
||||
name: 'AddForm',
|
||||
components: {
|
||||
UserSelection,
|
||||
JMultipleDatePicker,
|
||||
StandardSelection,
|
||||
JDictSelectTag,
|
||||
JMultiSelectTag,
|
||||
UploadFile,
|
||||
TreeSelection,
|
||||
STreeSelect
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 获取表单数据的方法
|
||||
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
|
||||
},
|
||||
extraParams: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 特殊的placeholder，目前只处理了输入框，有需要再处理别的
|
||||
specialPlaceholder: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 默认值
|
||||
defaultValue: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 不可修改值
|
||||
disabledFieldList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 数据字典多选，需要全选的字段列表
|
||||
openSelectedAllFieldList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 需要隐藏的字段
|
||||
hiddenFieldList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 不包含的标准从哪个字段取值
|
||||
excludeStandardValFormFields: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'standard_number'
|
||||
},
|
||||
// 需要处理不包含标准的字段
|
||||
excludeStandardFields: {
|
||||
type: [Array],
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否需要进行国内标准的特殊校验
|
||||
domesticSpecialCheck: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 选择标准字段和选择来源的对应关系
|
||||
flagByField: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 选择标准组件可以修改来源的字段（暂时只有企标的引用标准用到）
|
||||
selectStandardCanUpdateTypeField: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 如果是企标就获取企标级别映射数据
|
||||
if (this.flag === StandardSource.ENTERPRISE.value) {
|
||||
getStandardGradeClassification().then(res => {
|
||||
if (res.success) {
|
||||
this.standardGradeClassification = res.result
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
FieldType,
|
||||
StandardSource,
|
||||
loading: false,
|
||||
formInline: {},
|
||||
isFormInline: false,
|
||||
rules: {},
|
||||
confirmLoading: false,
|
||||
type: 2,
|
||||
dataList: [],
|
||||
ruleList: [],
|
||||
uploadName: '',
|
||||
optionsData: {}, // 用接口获取到的下拉数据
|
||||
excludeStandardNumbers: '', // 不包含的标准号
|
||||
standardGradeClassification: [], // 企标级别映射
|
||||
innerDisabledField: [], // 内部不可编辑字段
|
||||
departSelectRange: [], // 选择部门的选择范围，传了就只能从这些里面选，不传就都能选
|
||||
isEditSetData: false, // 正在编辑回显数据
|
||||
oldMainDraftingUnit: '', // 上一次的主起草单位
|
||||
dictNotCodes: ['name_code'] // 用到字典的字段不传dictCode的字段
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 国内的零部件分类、适用认证、适用车型和标准性质关联，准入标准必填，非准入标准不必填
|
||||
'formInline.standard_property' () {
|
||||
this.handleDomesticSpecialCheck()
|
||||
this.handleStatePropertyCheck()
|
||||
},
|
||||
// 标准等级分类改变后授权部门需要自动带出
|
||||
'formInline.grade_classification' (val) {
|
||||
if (val && this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||||
if (val === StandardGradeClassify.ZERO_LEVEL.value) {
|
||||
// 选的是0级，授权部门带出不可编辑
|
||||
this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '0').deptIds
|
||||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField.push('auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.ONE_LEVEL.value) {
|
||||
// 选的是1级
|
||||
// // 带出3级的部门：起草部门
|
||||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||||
// 带出主起草单位
|
||||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||||
// 设置可选择项
|
||||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '1').deptIds.split(',')
|
||||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||||
// 设置授权部门可编辑
|
||||
if (this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.TWO_LEVEL.value) {
|
||||
// 选的是2级
|
||||
// // 带出3级的部门：起草部门
|
||||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||||
// 带出主起草单位
|
||||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||||
// 设置可选择项
|
||||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '2').deptIds.split(',')
|
||||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||||
// 设置授权部门可编辑
|
||||
if (this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.THREE_LEVEL.value) {
|
||||
// // 选的是3级，授权部门带出不可编辑
|
||||
// this.formInline.auth_dept = this.standardGradeClassification.find(item => item.level + '' === '3').deptIds
|
||||
// 选的是3级，带出主起草单位
|
||||
this.formInline.auth_dept = this.formInline.main_drafting_unit
|
||||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField.push('auth_dept')
|
||||
}
|
||||
}
|
||||
} else if (val && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||||
if (val === StandardGradeClassify.ZERO_LEVEL.value) {
|
||||
// 选的是0级，授权部门带出不可编辑
|
||||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField.push('auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.ONE_LEVEL.value) {
|
||||
// 选的是1级
|
||||
// 设置可选择项
|
||||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '1').deptIds.split(',')
|
||||
// 设置授权部门可编辑
|
||||
if (this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.TWO_LEVEL.value) {
|
||||
// 选的是2级
|
||||
// 设置可选择项
|
||||
this.departSelectRange = this.standardGradeClassification.find(item => item.level + '' === '2').deptIds.split(',')
|
||||
// 设置授权部门可编辑
|
||||
if (this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||||
}
|
||||
} else if (val === StandardGradeClassify.THREE_LEVEL.value) {
|
||||
// 选的是3级，授权部门带出不可编辑
|
||||
if (!this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField.push('auth_dept')
|
||||
}
|
||||
}
|
||||
} else if (!val && this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||||
// 清空授权部门的可选项
|
||||
this.departSelectRange = []
|
||||
// 设置授权部门可编辑
|
||||
if (this.innerDisabledField.includes('auth_dept')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'auth_dept')
|
||||
}
|
||||
// 清空授权部门
|
||||
this.formInline.auth_dept = ''
|
||||
}
|
||||
},
|
||||
// 主起草单位改变后，需要将选中的主起草单位增加到授权部门
|
||||
'formInline.main_drafting_unit' (val) {
|
||||
if (val) {
|
||||
if (this.formInline.grade_classification === StandardGradeClassify.ONE_LEVEL.value ||
|
||||
this.formInline.grade_classification === StandardGradeClassify.TWO_LEVEL.value) {
|
||||
// 标准等级分类是1级或者2级需要，把主起草单位追加到授权部门
|
||||
let authDeptArr = (this.formInline.auth_dept || '').split(',')
|
||||
// 把旧的主起草部门刨出去，否则每换一次主起草单位都会累计到授权部门
|
||||
authDeptArr = authDeptArr.filter(item => item !== this.oldMainDraftingUnit)
|
||||
authDeptArr.push(val)
|
||||
this.formInline.auth_dept = authDeptArr.join(',')
|
||||
} else if (this.formInline.grade_classification === StandardGradeClassify.THREE_LEVEL.value) {
|
||||
// 标准等级分类是3级，把授权部门替换成主起草单位
|
||||
this.formInline.auth_dept = val
|
||||
}
|
||||
this.oldMainDraftingUnit = val
|
||||
}
|
||||
},
|
||||
// 企标是否试行改变，标准状态需要跟着变,试行周期必填校验也跟着变
|
||||
'formInline.try_flag' (val) {
|
||||
if (val && this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||||
if (val === IsTrial.YES.value) {
|
||||
// 试行，标准状态改为试运行，
|
||||
this.formInline.standard_state = EnterpriseStandardStatus.TRIAL_OPERATION.value
|
||||
// 试行周期给默认值24
|
||||
this.formInline.trial_period = '24'
|
||||
this.formInline = JSON.parse(JSON.stringify(this.formInline))
|
||||
// 试行，标准状态不可修改
|
||||
if (!this.innerDisabledField.includes('standard_state')) {
|
||||
this.innerDisabledField.push('standard_state')
|
||||
}
|
||||
// 试行，试行周期必填
|
||||
this.rules.trial_period[0].required = true
|
||||
} else {
|
||||
// 试行周期置空
|
||||
this.formInline.trial_period = undefined
|
||||
// 不试行，标准状态可修改
|
||||
if (this.innerDisabledField.includes('standard_state')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'standard_state')
|
||||
}
|
||||
// 不试行，试行周期非必填
|
||||
this.rules.trial_period[0].required = false
|
||||
}
|
||||
} else if (val && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||||
if (val === IsTrial.YES.value) {
|
||||
// 编辑回显得时候改变，设置标准状态不可编辑，试行周期必填
|
||||
// 试行，试行周期必填
|
||||
this.rules.trial_period[0].required = true
|
||||
} else {
|
||||
// 不试行，试行周期非必填
|
||||
this.rules.trial_period[0].required = false
|
||||
}
|
||||
}
|
||||
},
|
||||
// 编辑回显标准状态是废止，标准状态不可更改
|
||||
'formInline.standard_state' (val) {
|
||||
if (val && this.isEditSetData && (
|
||||
(this.flag === StandardSource.ENTERPRISE.value && val === EnterpriseStandardStatus.ABOLISH.value) ||
|
||||
(this.flag === StandardSource.DOMESTIC.value && val === StandardStatus.ABOLISH.value) ||
|
||||
(this.flag === StandardSource.OVERSEAS.value && val === StandardStatus.ABOLISH.value))) {
|
||||
// 状态是废止
|
||||
if (!this.innerDisabledField.includes('standard_state')) {
|
||||
this.innerDisabledField.push('standard_state')
|
||||
}
|
||||
} else if (this.formInline.try_flag === IsTrial.YES.value && this.flag === StandardSource.ENTERPRISE.value && this.isEditSetData) {
|
||||
// 企标，是否试行选的是，需要标准状态不可编辑
|
||||
if (!this.innerDisabledField.includes('standard_state')) {
|
||||
this.innerDisabledField.push('standard_state')
|
||||
}
|
||||
} else {
|
||||
// 状态不是废止
|
||||
if (this.innerDisabledField.includes('standard_state')) {
|
||||
this.innerDisabledField = this.innerDisabledField.filter(item => item !== 'standard_state')
|
||||
}
|
||||
}
|
||||
// 起草、征求依据、报批、废止状态时发布日期、实施日期不必填
|
||||
this.handleRequiredByState(val)
|
||||
this.handleStatePropertyCheck()
|
||||
},
|
||||
// 企标：企业标准代号选Q,企业名称代号只能选ZZ\ZR;标准代号选TS，企业名称代号只能选ZZ
|
||||
'formInline.standard_code' (val) {
|
||||
if (this.flag === StandardSource.ENTERPRISE.value && !this.isEditSetData) {
|
||||
if (val === EnterpriseStandardCode.Q.value) {
|
||||
// 选的Q，企业名称代号只能选ZZ\ZR
|
||||
this.optionsData.name_code.map(item => {
|
||||
if (![EnterpriseNameCode.ZZ.value, EnterpriseNameCode.ZR.value].includes(item.value)) {
|
||||
item.disabled = true
|
||||
} else {
|
||||
item.disabled = false
|
||||
}
|
||||
})
|
||||
} else if (val === EnterpriseStandardCode.TS.value) {
|
||||
// 选的TS，企业名称代号只能选ZZ
|
||||
this.optionsData.name_code.map(item => {
|
||||
if (![EnterpriseNameCode.ZZ.value].includes(item.value)) {
|
||||
item.disabled = true
|
||||
} else {
|
||||
item.disabled = false
|
||||
}
|
||||
})
|
||||
}
|
||||
if (this.formInline.name_code !== EnterpriseNameCode.ZZ.value) {
|
||||
this.formInline.name_code = undefined
|
||||
this.formInline = Object.assign({}, this.formInline)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.formInline = Object.assign({}, this.defaultValue)
|
||||
this.$forceUpdate()
|
||||
this.getForm()
|
||||
},
|
||||
edit (item, callback) {
|
||||
this.loading = true
|
||||
this.getForm(() => {
|
||||
if (!this.getDocumentInfoFunc || typeof this.getDocumentInfoFunc !== 'function') {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
// type标识是新增表单还是详情页
|
||||
this.getDocumentInfoFunc({ id: item.id, type: this.type }).then((res) => {
|
||||
if (res.success) {
|
||||
// 设置正在编辑回显值
|
||||
this.isEditSetData = true
|
||||
// 处理树结构多选回显
|
||||
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
|
||||
callback && callback(this.formInline)
|
||||
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
|
||||
console.log(this.formInline[field.dbFieldName])
|
||||
} 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.excludeStandardNumbers = this.formInline[this.excludeStandardValFormFields]
|
||||
this.handleDomesticSpecialCheck()
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
}).finally(() => {
|
||||
// 设置编辑回显值完成
|
||||
this.isEditSetData = 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() // 获取下拉数据
|
||||
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 {
|
||||
rule.push({
|
||||
required: true,
|
||||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||||
trigger: 'change'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if ([FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value].includes(res.fieldShowType)) {
|
||||
rule.push({
|
||||
required: false,
|
||||
message: res.dbFieldTxt + this.$t('cannotEmpty'),
|
||||
trigger: 'blur'
|
||||
})
|
||||
} else {
|
||||
rule.push({
|
||||
required: false,
|
||||
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.fieldHref) {
|
||||
getAction(item.fieldHref).then(res => {
|
||||
if (res.success) {
|
||||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||||
}
|
||||
})
|
||||
} else if ((item.fieldShowType === FieldType.TREE.value || item.fieldShowType === FieldType.TREE_SINGLE.value) && item.dictId) {
|
||||
getFormDictTreeList({ dictId: item.dictId }).then(res => {
|
||||
if (res.success) {
|
||||
this.$set(this.optionsData, item.dbFieldName, res.result)
|
||||
}
|
||||
})
|
||||
} else if (item.fieldShowType === FieldType.OPTION_SINGLE.value && this.dictNotCodes.includes(item.dbFieldName)) {
|
||||
ajaxGetDictItems(item.dictField).then(res => {
|
||||
if (res.success) {
|
||||
const result = JSON.parse(JSON.stringify(res.result))
|
||||
if (item.dbFieldName === 'name_code') {
|
||||
for (const dictItem of result) {
|
||||
if ([EnterpriseNameCode.WQ.value, EnterpriseNameCode.JC.value, EnterpriseNameCode.JHK.value].includes(dictItem.value)) {
|
||||
dictItem.disabled = true
|
||||
} else {
|
||||
dictItem.disabled = false
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('获取企业名称代号下拉框数据成功了', result)
|
||||
this.$set(this.optionsData, item.dbFieldName, result)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击点击上传按钮
|
||||
clickButtonToUpload (item) {
|
||||
this.$refs.uploadFile.open(this.formInline[item.dbFieldName])
|
||||
this.uploadName = item.dbFieldName
|
||||
},
|
||||
// 文件上传改变后的回调
|
||||
uploadFileChange (data) {
|
||||
const attIdList = []
|
||||
const attNameList = []
|
||||
if (data && data.length > 0) {
|
||||
data.map(item => {
|
||||
attIdList.push(item.id)
|
||||
})
|
||||
data.map(item => {
|
||||
attNameList.push(item.fileName)
|
||||
})
|
||||
this.$refs.ruleForm.clearValidate(this.uploadName)
|
||||
}
|
||||
console.log(data)
|
||||
/** 赋值给当前对应的表单文件 */
|
||||
this.formInline[this.uploadName] = attIdList.join(',')
|
||||
this.formInline[this.uploadName + '_dictText'] = attNameList.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
|
||||
},
|
||||
treeSelectNameChange (value, fieldName) {
|
||||
this.formInline[fieldName + '_dictText'] = value
|
||||
},
|
||||
submit () {
|
||||
this.$refs.ruleForm.validate(valid => {
|
||||
if (valid) {
|
||||
const formInline = { ...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(',')
|
||||
}
|
||||
} else if (typeof formInline[res] === 'undefined') {
|
||||
// 说明是undefined，改成空字符串,为了解决下拉框改成undefined时，不会传给后端该字段，改不了下拉框值的问题
|
||||
formInline[res] = ''
|
||||
}
|
||||
})
|
||||
this.$emit('submitFormData', formInline)
|
||||
} else {
|
||||
this.$emit('addFormWarning')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
clearValidate (fieldNameList) {
|
||||
this.$refs.ruleForm.clearValidate(fieldNameList)
|
||||
},
|
||||
/**
|
||||
* 标准性质是准入，状态为发布、即将实施和现行有效的时候 新车型实施日期和在产车的实施日期 都改成必填
|
||||
*/
|
||||
handleStatePropertyCheck () {
|
||||
const mustFillFields = ['new_model_implementation_date', 'on_the_production_date']
|
||||
const rules = JSON.parse(JSON.stringify(this.rules))
|
||||
if (this.formInline.standard_property === StandardProperty.admittance.value && (
|
||||
this.formInline.standard_state === StandardStatus.RELEASE.value ||
|
||||
this.formInline.standard_state === StandardStatus.BE_IMPLEMENTED_SOON.value ||
|
||||
this.formInline.standard_state === StandardStatus.CURRENTLY_EFFECTIVE.value)) {
|
||||
mustFillFields.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = true
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '1'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
mustFillFields.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = false
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '0'
|
||||
}
|
||||
})
|
||||
}
|
||||
this.rules = Object.assign({}, rules)
|
||||
this.clearValidate(mustFillFields)
|
||||
},
|
||||
/**
|
||||
* 国内海外的特殊处理
|
||||
*/
|
||||
handleDomesticSpecialCheck () {
|
||||
if (this.domesticSpecialCheck) {
|
||||
const fieldNameList = ['part_name', 'applicable_certification', 'applicable_vehicle', 'responsible_department']
|
||||
const rules = JSON.parse(JSON.stringify(this.rules))
|
||||
if (this.formInline.standard_property === StandardProperty.admittance.value) {
|
||||
fieldNameList.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = true
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '1'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
fieldNameList.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = false
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '0'
|
||||
}
|
||||
})
|
||||
}
|
||||
this.rules = Object.assign({}, rules)
|
||||
this.clearValidate(fieldNameList)
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
/**
|
||||
* 标准状态为起草、征求意见、报批等状态时发布日期、实施日期不应是必填项
|
||||
* @param val
|
||||
*/
|
||||
handleRequiredByState (val) {
|
||||
let notRequiredStatus = [], fields = []
|
||||
// 国内和海外的标准状态是同一个数据字典
|
||||
if (this.flag === StandardSource.DOMESTIC.value || this.flag === StandardSource.OVERSEAS.value) {
|
||||
notRequiredStatus = [StandardStatus.DRAFT.value, StandardStatus.SEEK_FOR_OPTIONS.value, StandardStatus.EXAMINE.value, StandardStatus.APPROVAL.value, StandardStatus.ABOLISH.value]
|
||||
fields = ['release_date', 'implementation_date']
|
||||
} else { // 处理企标
|
||||
notRequiredStatus = [EnterpriseStandardStatus.DRAFT.value, EnterpriseStandardStatus.SEEK_FOR_OPTIONS.value, EnterpriseStandardStatus.EXAMINE.value, EnterpriseStandardStatus.APPROVAL.value]
|
||||
fields = ['release_date', 'implementation_date']
|
||||
}
|
||||
const rules = JSON.parse(JSON.stringify(this.rules))
|
||||
if (notRequiredStatus.includes(val)) {
|
||||
fields.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = false
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '0'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
fields.forEach(key => {
|
||||
if (rules[key] && rules[key].length > 0) {
|
||||
rules[key][0].required = true
|
||||
const dataPart = Object.keys(this.dataList).find(tt => this.dataList[tt].some(item => item.dbFieldName === key))
|
||||
const index = this.dataList[dataPart].findIndex(tt => tt.dbFieldName === key)
|
||||
this.dataList[dataPart][index].fieldMustInput = '1'
|
||||
}
|
||||
})
|
||||
}
|
||||
this.rules = Object.assign({}, rules)
|
||||
this.clearValidate(fields)
|
||||
}
|
||||
}
|
||||
}
|
||||
</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-half {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.form-flex-item-line {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="(24 / (minLength + 1))"
|
||||
:sm="(24 / minLength)"
|
||||
v-for="(item) in searchList.slice(0, minLength)"
|
||||
:key="item.id"
|
||||
style="line-height: 48px">
|
||||
<!-- 树形选择器 -->
|
||||
<template v-if="item.fieldShowType === FieldType.TREE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
:tree-data="optionsData[item.dbFieldName]"
|
||||
tree-checkable
|
||||
show-search
|
||||
allowClear
|
||||
:filterTreeNode="filterTreeOption"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 树形选择器（单选） -->
|
||||
<template v-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
:tree-data="optionsData[item.dbFieldName]"
|
||||
show-search
|
||||
allowClear
|
||||
:filterTreeNode="filterTreeOption"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 输入框 -->
|
||||
<template
|
||||
v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
|
||||
FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
|
||||
.includes(item.fieldShowType)">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||||
v-model="queryParam[item.dbFieldName]"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 数字输入框 -->
|
||||
<!-- <template v-else-if="item.fieldShowType === FieldType.TEXT_NUMBER.value">-->
|
||||
<!-- <a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
||||
<!-- <a-input-number :placeholder="$t('pleaseEnter')+item.dbFieldTxt"-->
|
||||
<!-- v-model="queryParam[item.dbFieldName]" :min="1" :max="99999999"/>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </template>-->
|
||||
<!-- 日期区间 -->
|
||||
<template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-range-picker v-model="queryParam[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
@change="onChange(item.dbFieldName)"></a-range-picker>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 字典单选框 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:type="'select'"
|
||||
:triggerChange="false" :dictCode="item.dictField" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 字典多选框 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:type="'select'" :maxTagCount="1"
|
||||
:triggerChange="false" :dictCode="item.dictField" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 组织机构选择 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
allowClear
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
class="box-input"
|
||||
style="width: 100%"
|
||||
:tree-data="categoryTreeList"
|
||||
show-search
|
||||
:filterTreeNode="filterTreeOption"
|
||||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 组织机构多选 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
allowClear
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
class="box-input"
|
||||
style="width: 100%"
|
||||
:tree-data="categoryTreeList"
|
||||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||||
treeCheckable
|
||||
treeCheckStrictly
|
||||
show-search
|
||||
:filterTreeNode="filterTreeOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 年份选择 -->
|
||||
<template
|
||||
v-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date show-type="year"
|
||||
:allowClear="false"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
date-format="YYYY"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-col>
|
||||
<template v-if="searchList.length > minLength && toggleSearchStatus">
|
||||
<a-col :md="(24 / (minLength + 1))"
|
||||
:sm="(24 / minLength)"
|
||||
v-for="(item) in searchList.slice(minLength)"
|
||||
:key="item.id"
|
||||
style="line-height: 48px">
|
||||
<!-- 树形选择器 -->
|
||||
<template v-if="item.fieldShowType === FieldType.TREE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
:tree-data="optionsData[item.dbFieldName]"
|
||||
tree-checkable
|
||||
treeCheckStrictly
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
show-search
|
||||
allowClear
|
||||
:filterTreeNode="filterTreeOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 树形选择器（单选） -->
|
||||
<template v-if="item.fieldShowType === FieldType.TREE_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
:tree-data="optionsData[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
show-search
|
||||
allowClear
|
||||
:filterTreeNode="filterTreeOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 输入框 -->
|
||||
<template v-if="[FieldType.TEXT_BOX.value, FieldType.TEXTAREA.value,FieldType.USER_SINGLE.value,
|
||||
FieldType.STANDARD_MORE.value,FieldType.TREE_MODAL_SELECT.value]
|
||||
.includes(item.fieldShowType)">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input :placeholder="$t('pleaseEnter')+item.dbFieldTxt"
|
||||
v-model="queryParam[item.dbFieldName]"></a-input>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 组织机构单选 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
class="box-input"
|
||||
style="width: 100%"
|
||||
:tree-data="categoryTreeList"
|
||||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||||
show-search
|
||||
allowClear
|
||||
:filterTreeNode="filterTreeOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 组织机构多选 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.ORGAN_MORE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-tree-select
|
||||
tree-node-filter-prop="title"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
:maxTagCount="1"
|
||||
:show-search="true"
|
||||
allowClear
|
||||
:getPopupContainer="triggerNode=> triggerNode.parentNode"
|
||||
class="box-input"
|
||||
style="width: 100%"
|
||||
:tree-data="categoryTreeList"
|
||||
:placeholder="$t('pleaseSelect') + item.dbFieldTxt"
|
||||
treeCheckable
|
||||
treeCheckStrictly
|
||||
:filterTreeNode="filterTreeOption"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 日期区间选择器 -->
|
||||
<template v-else-if="[FieldType.DATE_SINGLE.value, FieldType.DATE_MORE.value].includes(item.fieldShowType)">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-range-picker v-model="queryParam[item.dbFieldName]"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||||
@change="onChange(item.dbFieldName)"></a-range-picker>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 字典单选 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.OPTION_SINGLE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-dict-select-tag v-model="queryParam[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:type="'select'"
|
||||
:triggerChange="false" :dictCode="item.dictField" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 字典多选框 -->
|
||||
<template v-else-if="item.fieldShowType === FieldType.OPTION_MORE.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-multi-select-tag v-model="queryParam[item.dbFieldName]"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt"
|
||||
:type="'select'" :maxTagCount="1"
|
||||
:triggerChange="false" :dictCode="item.dictField" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 年份选择 -->
|
||||
<template
|
||||
v-if="item.fieldShowType === FieldType.YEAR_PICKER.value">
|
||||
<a-form-item :label="item.dbFieldTxt" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<j-date show-type="year"
|
||||
:allowClear="false"
|
||||
v-model="queryParam[item.dbFieldName]"
|
||||
date-format="YYYY"
|
||||
:placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
</a-col>
|
||||
</template>
|
||||
<div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
|
||||
<a @click="handleToggleSearch" v-if="searchList.length > minLength">
|
||||
{{ !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="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
|
||||
</div>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JDictSelectTag from '../dict/JDictSelectTag'
|
||||
import { FieldType } from '../../enums/commonEnums'
|
||||
import eventBus from '@/common/event'
|
||||
import { getFormDictTreeList, queryDepartTreeList } from '../../api/api'
|
||||
import { getAction } from '../../api/manage'
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: { JDictSelectTag },
|
||||
props: {
|
||||
// 获取查询条件的方法
|
||||
getQueryConditionFunc: {
|
||||
type: Function,
|
||||
required: false,
|
||||
default: () => {
|
||||
return function () {
|
||||
}
|
||||
}
|
||||
},
|
||||
flag: { // 暂时不清楚flag的用处，是要查searchList的时候传给后端的
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
minLength: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 查询权限
|
||||
searchHas: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
// 默认的查询条件
|
||||
defaultSearchParams: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
// searchQueryList: {
|
||||
// type: Array,
|
||||
// default: () => {
|
||||
// return []
|
||||
// }
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
FieldType,
|
||||
categoryTreeList: [], // 组织机构下拉框数据
|
||||
queryParam: {},
|
||||
toggleSearchStatus: false,
|
||||
searchList: [],
|
||||
labelCol: {
|
||||
span: 6
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 14
|
||||
},
|
||||
optionsData: {} // 用接口获取到的下拉数据
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.queryParam = Object.assign({}, this.defaultSearchParams)
|
||||
},
|
||||
mounted () {
|
||||
this.getSysCategoryTree()
|
||||
this.getSearch()
|
||||
},
|
||||
methods: {
|
||||
searchQuery () {
|
||||
const formInline = JSON.parse(JSON.stringify(this.queryParam))
|
||||
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('search', JSON.parse(JSON.stringify(formInline)))
|
||||
eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
|
||||
},
|
||||
searchReset () {
|
||||
this.queryParam = Object.assign({}, this.defaultSearchParams)
|
||||
console.log(this.defaultSearchParams, this.queryParam)
|
||||
this.$emit('reset', JSON.parse(JSON.stringify(this.queryParam)))
|
||||
eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
|
||||
},
|
||||
// 获取组织机构树
|
||||
getSysCategoryTree () {
|
||||
queryDepartTreeList().then((res) => {
|
||||
if (res.success) {
|
||||
this.categoryTreeList = res.result
|
||||
} else {
|
||||
this.categoryTreeList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取查询条件列表
|
||||
getSearch () {
|
||||
console.log(this.getQueryConditionFunc)
|
||||
if (!this.getQueryConditionFunc || typeof this.getQueryConditionFunc !== 'function') {
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
module: this.flag
|
||||
}
|
||||
this.getQueryConditionFunc(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.searchList = res.result
|
||||
// 标准状态特殊处理成多选
|
||||
const standardStateIndex = this.searchList.findIndex(item => item.dbFieldName === 'standard_state')
|
||||
this.searchList[standardStateIndex].fieldShowType = FieldType.OPTION_MORE.value
|
||||
this.getOptionsData() // 获取下拉数据
|
||||
console.log(this.searchList)
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 处理需要通过接口获取的下拉数据
|
||||
*/
|
||||
getOptionsData () {
|
||||
const formList = Object.values(this.searchList).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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
onChange (item) {
|
||||
if (this.queryParam[item] && this.queryParam[item].length > 0) {
|
||||
const startDate = item + '_start'
|
||||
const endDate = item + '_end'
|
||||
this.queryParam[startDate] = this.queryParam[item][0]
|
||||
this.queryParam[endDate] = this.queryParam[item][1]
|
||||
} else {
|
||||
this.queryParam[item] = []
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
</style>
|
||||
@@ -0,0 +1,389 @@
|
||||
<template>
|
||||
<div class="box" v-if="isTrue">
|
||||
<a-table
|
||||
class="table"
|
||||
rowKey="id"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: selectionType }"
|
||||
:pagination="ipagination"
|
||||
:scroll="{x: '100%'}"
|
||||
:components="drag(columns,'columns')"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:rowClassName="rowClassName"
|
||||
:columns="columns"
|
||||
@change="tableOnChange"
|
||||
>
|
||||
<tempalte slot="operation" slot-scope="text, record">
|
||||
<a v-for="(ol, index) in operationList" :key="index" @click="operationClick(ol,record)">
|
||||
<span v-if="ol.text === $t('cancelCollection')" v-has="ol.has" class="text">
|
||||
{{ !record.collectFlag || record.collectFlag === 0 ? $t('collection') :$t('cancelCollection') }}
|
||||
</span>
|
||||
<span v-else-if="ol.text === $t('cancelSubscribe')" v-has="ol.has" class="text">
|
||||
{{ !record.subscribeFlag || record.subscribeFlag === 0 ? $t('subscribe') :$t('cancelSubscribe') }}
|
||||
</span>
|
||||
<!-- v-has="ol.has"-->
|
||||
<span v-else class="text">
|
||||
{{ ol.text }}
|
||||
</span>
|
||||
</a>
|
||||
</tempalte>
|
||||
<span slot="detailClick" slot-scope="text, record">
|
||||
<a class="text-name" :title="text" @click="detailClick(record)">
|
||||
{{text}}
|
||||
</a>
|
||||
</span>
|
||||
<span slot="detail" slot-scope="text">
|
||||
<span class="text-name" :title="text">
|
||||
{{text}}
|
||||
</span>
|
||||
</span>
|
||||
<span slot="urlClick" slot-scope="text">
|
||||
<a class="text" :title="text" @click="urlClick(text)">
|
||||
{{text}}
|
||||
</a>
|
||||
</span>
|
||||
<span slot="detailText" slot-scope="text">
|
||||
<span class="text" :title="text">
|
||||
{{text}}
|
||||
</span>
|
||||
</span>
|
||||
<span slot="showContent" slot-scope="text, record" class="item-solt">
|
||||
<span class="content-show" href="javascript:;" @click="showContent(text,record)">{{record.iterms_conditions&&record.iterms_conditions!=='null'?record.iterms_conditions.replace(/<.*?>/ig, ' ') : ''}}</span>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ResizeColumnProvide, ResizeHeader } from '@/mixins/header'
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import eventBus from '@/common/event'
|
||||
|
||||
export default {
|
||||
name: 'TableData',
|
||||
mixins: [ResizeColumnProvide, ResizeHeader],
|
||||
props: {
|
||||
// 接口
|
||||
url: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
// 操作按钮
|
||||
operationList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
flag: { // flag获取数据时传给后端的，具体作用还不知道？？
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 表格选择是单选还是多选
|
||||
selectionType: {
|
||||
type: String,
|
||||
default: 'checkbox'
|
||||
},
|
||||
// 是否显示操作；默认不显示
|
||||
showAction: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 50,
|
||||
pageSizeOptions: ['10', '30', '50', '100', '150', '200'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
columns: [],
|
||||
selectedRowKeys: [],
|
||||
dataSource: [],
|
||||
isTrue: false,
|
||||
searchParams: {},
|
||||
loading: false,
|
||||
orderBy: '1',
|
||||
orderByField: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
eventBus.$on('searchQuery', search => {
|
||||
Object.keys(search).forEach(res => {
|
||||
if (search[res] instanceof Array) {
|
||||
search[res] = search[res].join(',')
|
||||
}
|
||||
})
|
||||
this.searchParams = search
|
||||
this.getData()
|
||||
this.getTableList()
|
||||
})
|
||||
eventBus.$on('searchReset', target => {
|
||||
this.searchParams = {}
|
||||
this.selectedRowKeys = []
|
||||
this.getData()
|
||||
this.getTableList()
|
||||
})
|
||||
this.$on('searchGetData', target => {
|
||||
this.selectedRowKeys = []
|
||||
this.getData()
|
||||
this.getTableList()
|
||||
})
|
||||
// this.getData()
|
||||
// this.getTableList()
|
||||
this.columns = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'serial_number',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
sorter: 'true',
|
||||
width: 215,
|
||||
scopedSlots: {
|
||||
customRender: 'detailClick'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
sorter: 'true',
|
||||
width: 215,
|
||||
scopedSlots: {
|
||||
customRender: 'detailClick'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'state',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
sorter: 'true',
|
||||
width: 215
|
||||
},
|
||||
{
|
||||
title: '适用地区',
|
||||
dataIndex: 'region',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
width: 215
|
||||
},
|
||||
{
|
||||
title: '技术领域',
|
||||
dataIndex: 'technologyTerritory',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
width: 215
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
dataIndex: 'issue_time',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
width: 215
|
||||
}
|
||||
// {
|
||||
// title: this.$t('operation'),
|
||||
// align: 'center',
|
||||
// fixed: 'right',
|
||||
// width: 200,
|
||||
// scopedSlots: { customRender: 'operation' }
|
||||
// }
|
||||
]
|
||||
let width = 0
|
||||
if (this.operationList.length > 0) {
|
||||
for (let i = 0; i < this.operationList.length; i++) {
|
||||
width += this.getTextWith(this.operationList[i].text)
|
||||
}
|
||||
}
|
||||
if (this.showAction) {
|
||||
this.columns.push({
|
||||
title: this.$t('operation'),
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: width,
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
})
|
||||
}
|
||||
this.dataSource = [
|
||||
{
|
||||
collectFlag: '0',
|
||||
id: 'fd045f5c5d734087a884a63664ee91f1',
|
||||
issue_time: '',
|
||||
region: '',
|
||||
serial_number: '0621001编号',
|
||||
state: '现行',
|
||||
subscribeFlag: '0',
|
||||
technology_territory: '',
|
||||
title: '0621001标题',
|
||||
title_en: '0621001Title'
|
||||
}
|
||||
]
|
||||
this.isTrue = true
|
||||
},
|
||||
beforeDestroy () {
|
||||
eventBus.$off('searchQuery')
|
||||
eventBus.$off('searchReset')
|
||||
this.$off('searchGetData')
|
||||
},
|
||||
methods: {
|
||||
rowClassName (record) {
|
||||
return record.state === '废止' ? 'rowClassNameBack' : ''
|
||||
},
|
||||
getTextWith (text, fontStyle) {
|
||||
const canvas = document.createElement('canvas')
|
||||
const context = canvas.getContext('2d')
|
||||
context.font = fontStyle || '14px' // 设置字体样式
|
||||
const dimension = context.measureText(text)
|
||||
return dimension.width + 40
|
||||
},
|
||||
getData () {
|
||||
const params = {
|
||||
flag: this.flag
|
||||
}
|
||||
getAction(this.url.tableHeader, params).then((res) => {
|
||||
if (res.success) {
|
||||
const jsonHead = res.result
|
||||
this.columns = []
|
||||
// res.db_field_txt
|
||||
jsonHead.forEach((res, index) => {
|
||||
this.columns.push({
|
||||
title: res.db_field_txt,
|
||||
dataIndex: res.db_field_name,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
sorter: res.sort,
|
||||
width: 215
|
||||
})
|
||||
if (res.click) {
|
||||
this.columns[index].scopedSlots = {
|
||||
customRender: 'detailClick'
|
||||
}
|
||||
this.columns[index].ellipsis = false
|
||||
} else if (res.urlClick) {
|
||||
this.columns[index].scopedSlots = {
|
||||
customRender: 'urlClick'
|
||||
}
|
||||
} else if (res.db_field_name === 'iterms_conditions') {
|
||||
// 拆分文档详情页的条款内容点击可预览
|
||||
this.columns[index].width = 500
|
||||
this.columns[index].scopedSlots = {
|
||||
customRender: 'showContent'
|
||||
}
|
||||
} else {
|
||||
this.columns[index].scopedSlots = {
|
||||
customRender: 'detailText'
|
||||
}
|
||||
}
|
||||
})
|
||||
let width = 0
|
||||
if (this.operationList.length > 0) {
|
||||
for (let i = 0; i < this.operationList.length; i++) {
|
||||
width += this.getTextWith(this.operationList[i].text)
|
||||
}
|
||||
}
|
||||
if (this.showAction) {
|
||||
this.columns.push({
|
||||
title: this.$t('operation'),
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: width,
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
})
|
||||
}
|
||||
this.isTrue = false
|
||||
this.$nextTick(() => {
|
||||
this.isTrue = true
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
tableOnChange (pagination, filters, sorter) {
|
||||
this.orderBy = sorter.order === 'ascend' ? '1' : '2'
|
||||
this.orderByField = sorter.columnKey
|
||||
this.ipagination = pagination
|
||||
this.getTableList()
|
||||
},
|
||||
getTableList () {
|
||||
const pageNo = this.ipagination.current
|
||||
const pageSize = this.ipagination.pageSize
|
||||
const params = {
|
||||
...this.searchParams,
|
||||
orderBy: this.orderBy,
|
||||
orderByField: this.orderByField,
|
||||
type: this.type,
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize
|
||||
}
|
||||
this.loading = true
|
||||
postAction(this.url.tableList, params).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.current > 1 && res.result.records.length === 0) {
|
||||
this.ipagination.current = res.result.current - 1
|
||||
this.getTableList()
|
||||
return
|
||||
}
|
||||
this.dataSource = res.result.records
|
||||
this.ipagination.total = res.result.total
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
onSelectChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.$emit('onSelectChange', selectedRowKeys, selectedRows)
|
||||
},
|
||||
operationClick (ol, item) {
|
||||
this.$emit(ol.clickEvent, item)
|
||||
},
|
||||
detailClick (item, index) {
|
||||
this.$emit('detailClick', item)
|
||||
},
|
||||
urlClick (item) {
|
||||
window.open(item)
|
||||
},
|
||||
showContent (item) {
|
||||
this.$emit('showContent', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.text {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text-name {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item-solt {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user