|
|
@@ -0,0 +1,394 @@
|
|
|
+<template>
|
|
|
+ <div class="hc-project-list-adjust-excel-set-e-visa">
|
|
|
+ <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto">
|
|
|
+ <el-form-item label="元素坐标：" prop="name">
|
|
|
+ <el-input v-model="formModel.name" placeholder="请点击左侧表单" disabled />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证书类型：" prop="type">
|
|
|
+ <el-select v-model="formModel.type" filterable block placeholder="请选择证书类型">
|
|
|
+ <el-option label="个人证书" :value="2" />
|
|
|
+ <el-option label="企业证书" :value="6" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="formModel.type === 2">
|
|
|
+ <el-form-item label="所属方：" prop="roleType">
|
|
|
+ <el-select v-model="formModel.roleType" filterable block placeholder="请选择所属方" @change="getRoleData">
|
|
|
+ <el-option v-for="item in roleType" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="签字角色：" prop="role">
|
|
|
+ <el-select v-model="formModelRole" filterable block placeholder="请选择签字角色">
|
|
|
+ <el-option v-for="item in roleData" :key="item.value" :label="item.label" :value="item" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-row v-if="formModel.textId === 'date' || formModel.textId === 'daterange'" :gutter="20">
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-form-item label="日期格式：" prop="date">
|
|
|
+ <el-checkbox-group v-model="formModel.date">
|
|
|
+ <el-checkbox v-for="item in yearList" :key="item.value" :value="item.value">{{ item.label }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="" prop="divide_y">
|
|
|
+ <el-select v-model="formModel.divide_y" block placeholder="选择分隔符">
|
|
|
+ <el-option label="文本" value="文本" />
|
|
|
+ <el-option label="-" value="-" />
|
|
|
+ <el-option label="/" value="/" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-if="formModel.textId === 'date' || formModel.textId === 'daterange'" :gutter="20">
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-form-item label="时间格式：" prop="time">
|
|
|
+ <el-checkbox-group v-model="formModel.time">
|
|
|
+ <el-checkbox v-for="item in timeList" :key="item.value" :value="item.value">{{ item.label }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="" prop="divide_h">
|
|
|
+ <el-select v-model="formModel.divide_h" block placeholder="选择分隔符">
|
|
|
+ <el-option label="文本" value="文本" />
|
|
|
+ <el-option label=":" value=":" />
|
|
|
+ <el-option label="/" value="/" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item v-if="formModel.textId === 'daterange'" label="中间分隔符：" prop="divide_c">
|
|
|
+ <el-select v-model="formModel.divide_c" block placeholder="选择中间分隔符">
|
|
|
+ <el-option label="至" value="至" />
|
|
|
+ <el-option label="-" value="-" />
|
|
|
+ <el-option label="~" value="~" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <hc-card-item v-if="['select', 'radio', 'checkbox', 'selectBox'].indexOf(formModel.textId) !== -1" title="相关数据：">
|
|
|
+ <template #extra>
|
|
|
+ <el-button type="primary" size="small" @click="addTableData">新增</el-button>
|
|
|
+ </template>
|
|
|
+ <hc-table :column="tableColumn" :datas="tableData" :is-current-row="false">
|
|
|
+ <template #dictValue="{ row }">
|
|
|
+ <hc-table-input v-model="row.dictValue" />
|
|
|
+ </template>
|
|
|
+ <template #action="{ index }">
|
|
|
+ <el-link type="danger" @click="rowDelClick(index)">删除</el-link>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-card-item>
|
|
|
+ <div class="action-btn-box mt-30px text-center">
|
|
|
+ <el-button type="primary" :loading="submitLoading" @click="dialogSubmit">
|
|
|
+ <hc-icon name="save" />
|
|
|
+ <span>保存设置</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref, watch } from 'vue'
|
|
|
+import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
|
|
|
+import { getDictionaryData } from '~uti/tools'
|
|
|
+import mainApi from '~api/project/tree'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+})
|
|
|
+
|
|
|
+//事件
|
|
|
+const emit = defineEmits(['finish'])
|
|
|
+
|
|
|
+//监听数据
|
|
|
+const dataInfo = ref(props.info)
|
|
|
+watch(() => props.info, (data) => {
|
|
|
+ dataInfo.value = getObjValue(data)
|
|
|
+}, { immediate: true, deep: true })
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+onMounted(() => {
|
|
|
+ getRoleTypeData()
|
|
|
+ getDataApi()
|
|
|
+})
|
|
|
+
|
|
|
+//获取数据
|
|
|
+const sysTextType = ref([])
|
|
|
+const getDataApi = async () => {
|
|
|
+ sysTextType.value = await getDictionaryData('sys_text_type')
|
|
|
+}
|
|
|
+
|
|
|
+//获取所属方
|
|
|
+const roleType = ref([])
|
|
|
+const getRoleTypeData = async () => {
|
|
|
+ const { data } = await mainApi.getRoleType()
|
|
|
+ roleType.value = getArrValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//获取签字角色
|
|
|
+const formModelRole = ref({})
|
|
|
+const roleData = ref([])
|
|
|
+const getRoleData = async () => {
|
|
|
+ formModelRole.value = {}
|
|
|
+ const { roleType } = formModel.value
|
|
|
+ if (isNullES(roleType)) {
|
|
|
+ roleData.value = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const { data } = await mainApi.getRoleInfoByParentId({ ParentId: roleType })
|
|
|
+ roleData.value = getArrValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//年月日，时分秒
|
|
|
+const yearList = [{ label:'年', value:'YYYY', sort: 1 }, { label:'月', value:'MM', sort: 2 }, { label:'日', value:'DD', sort: 3 }]
|
|
|
+const timeList = [{ label:'时', value:'HH', sort: 4 }, { label:'分', value:'mm', sort: 5 }, { label:'秒', value:'ss', sort: 6 }]
|
|
|
+
|
|
|
+//基础表单
|
|
|
+const formRef = ref(null)
|
|
|
+const formModel = ref({
|
|
|
+ date: ['YYYY', 'MM', 'DD'],
|
|
|
+ divide_y: '文本',
|
|
|
+ time: ['HH', 'mm', 'ss'],
|
|
|
+ divide_h: '文本',
|
|
|
+ divide_c: '至',
|
|
|
+})
|
|
|
+const formRules = {
|
|
|
+ name: { required: true, trigger: 'blur', message: '请先获取元素坐标' },
|
|
|
+ textId: { required: true, trigger: 'blur', message: '请选择文本格式' },
|
|
|
+ //date: { required: true, trigger: 'blur', message: '请选择日期格式' },
|
|
|
+ divide_y: { required: true, trigger: 'blur', message: '请选择日期分割' },
|
|
|
+ //time: { required: true, trigger: 'blur', message: '请选择时间格式' },
|
|
|
+ divide_h: { required: true, trigger: 'blur', message: '请选择时间分割' },
|
|
|
+ divide_c: { required: true, trigger: 'blur', message: '请选择中间分隔符' },
|
|
|
+}
|
|
|
+
|
|
|
+//数据表格
|
|
|
+const tableColumn = [
|
|
|
+ { key: 'dictValue', name: '默认值' },
|
|
|
+ { key: 'action', name: '操作', align: 'center', width: 70 },
|
|
|
+]
|
|
|
+const tableData = ref([{}])
|
|
|
+
|
|
|
+//新增数据
|
|
|
+const addTableData = () => {
|
|
|
+ tableData.value.push({})
|
|
|
+}
|
|
|
+
|
|
|
+//删除数据
|
|
|
+const rowDelClick = (index) => {
|
|
|
+ tableData.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+//提交
|
|
|
+const submitLoading = ref(false)
|
|
|
+const dialogSubmit = async () => {
|
|
|
+ const isForm = await formValidate(formRef.value)
|
|
|
+ if (!isForm) return false
|
|
|
+ submitLoading.value = true
|
|
|
+ const form = deepClone(formModel.value)
|
|
|
+ //如果日期存在
|
|
|
+ if (form.textId === 'date' || form.textId === 'daterange') {
|
|
|
+ if (form.date.length <= 0 && form.time.length <= 0) {
|
|
|
+ window.$message.warning('日期或时间，至少要选择一个')
|
|
|
+ submitLoading.value = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let dateFormat = []
|
|
|
+ if (!isNullES(form.date) && form.date.length > 0) {
|
|
|
+ if (form.date.indexOf('YYYY') !== -1) {
|
|
|
+ dateFormat.push({ name: '年', value: 'YYYY' })
|
|
|
+ }
|
|
|
+ if (form.date.indexOf('MM') !== -1) {
|
|
|
+ dateFormat.push({ name: '月', value: 'MM' })
|
|
|
+ }
|
|
|
+ if (form.date.indexOf('DD') !== -1) {
|
|
|
+ dateFormat.push({ name: '日', value: 'DD' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isNullES(form.time) && form.time.length > 0) {
|
|
|
+ if (form.time.indexOf('HH') !== -1) {
|
|
|
+ dateFormat.push({ name: '时', value: 'HH' })
|
|
|
+ }
|
|
|
+ if (form.time.indexOf('mm') !== -1) {
|
|
|
+ dateFormat.push({ name: '分', value: 'mm' })
|
|
|
+ }
|
|
|
+ if (form.time.indexOf('ss') !== -1) {
|
|
|
+ dateFormat.push({ name: '秒', value: 'ss' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isNullES(form.date) && !isNullES(form.time)) {
|
|
|
+ if (!isNullES(form.divide_y)) {
|
|
|
+ dateFormat.push({ name: 'divide_y', value: form.divide_y })
|
|
|
+ }
|
|
|
+ if (!isNullES(form.divide_h)) {
|
|
|
+ dateFormat.push({ name: 'divide_h', value: form.divide_h })
|
|
|
+ }
|
|
|
+ if (!isNullES(form.divide_c)) {
|
|
|
+ dateFormat.push({ name: 'divide_c', value: form.divide_c })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (dateFormat.length > 0) {
|
|
|
+ form.dateFormat = dateFormat
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //下拉框等数组数据
|
|
|
+ if (['select', 'radio', 'checkbox', 'selectBox'].indexOf(form.textId) !== -1) {
|
|
|
+ if (tableData.value.length <= 0) {
|
|
|
+ window.$message.warning('请先新增要选择的数据')
|
|
|
+ submitLoading.value = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ form.textInfo = tableData.value
|
|
|
+ }
|
|
|
+ const { isRes } = await mainApi.saveTextInfo([form])
|
|
|
+ submitLoading.value = false
|
|
|
+ if (!isRes) return
|
|
|
+ window.$message.success('操作成功')
|
|
|
+ emit('finish')
|
|
|
+}
|
|
|
+
|
|
|
+//设置dom数据
|
|
|
+const typeObj = {
|
|
|
+ text: 'input',
|
|
|
+ select: 'select',
|
|
|
+ multiple_select: 'selectBox',
|
|
|
+ textarea: 'textarea',
|
|
|
+ checkbox_group: 'checkbox',
|
|
|
+ form_checkbox: 'checkbox',
|
|
|
+ checkbox: 'checkbox',
|
|
|
+ radio_group: 'radio',
|
|
|
+ radio: 'radio',
|
|
|
+ date: 'date',
|
|
|
+ time: 'date',
|
|
|
+ datetime: 'date',
|
|
|
+ datetimerange: 'daterange',
|
|
|
+ dap_site_data: 'searchSelect',
|
|
|
+ strength_search: 'strengthSearch',
|
|
|
+ upload: 'img',
|
|
|
+ echart: 'echart',
|
|
|
+}
|
|
|
+const setDomData = (item) => {
|
|
|
+ const type = typeObj[item.type]
|
|
|
+ const { pkeyId } = dataInfo.value
|
|
|
+ formModel.value = {
|
|
|
+ name: item.text,
|
|
|
+ key: item.key,
|
|
|
+ type: '1',
|
|
|
+ trIndex: item.tr,
|
|
|
+ tdIndex: item.td,
|
|
|
+ textId: type,
|
|
|
+ tableId: pkeyId,
|
|
|
+ }
|
|
|
+ let newArr = []
|
|
|
+ if (type === 'selectBox' || type === 'select' || type === 'radio') {
|
|
|
+ //获取多选相关的数据
|
|
|
+ const dom = item?.zdom?.target
|
|
|
+ const child = dom.querySelectorAll('.hc-table-form-components-box')
|
|
|
+ for (let i = 0; i < child.length; i++) {
|
|
|
+ const val = child[i]?.getAttribute('data-label')
|
|
|
+ newArr.push({ dictValue: val })
|
|
|
+ }
|
|
|
+ } else if (type === 'checkbox') {
|
|
|
+ //获取多选框数据
|
|
|
+ const objs = isNullES(item.objs) ? [] : JSON.parse(item.objs)
|
|
|
+ for (let i = 0; i < objs.length; i++) {
|
|
|
+ newArr.push({ dictValue: objs[i].name })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tableData.value = newArr
|
|
|
+ if (type === 'date' || type === 'daterange') {
|
|
|
+ //分割日期时间
|
|
|
+ const arr = item?.format?.split(' ')
|
|
|
+ //移除空值
|
|
|
+ const dateTimes = arr.filter(item => {
|
|
|
+ return !isNullES(item)
|
|
|
+ })
|
|
|
+ //取相关数据
|
|
|
+ let date = '', time = ''
|
|
|
+ if (dateTimes.length >= 2) {
|
|
|
+ date = dateTimes[0]
|
|
|
+ time = dateTimes[1]
|
|
|
+ } else {
|
|
|
+ //要判断下，是日期还是时间
|
|
|
+ if (dateTimes[0].indexOf('Y') !== -1 || dateTimes[0].indexOf('y') !== -1) {
|
|
|
+ date = dateTimes[0]
|
|
|
+ } else if (dateTimes[0].indexOf('D') !== -1 || dateTimes[0].indexOf('d') !== -1) {
|
|
|
+ date = dateTimes[0]
|
|
|
+ } else if (dateTimes[0].indexOf('H') !== -1 || dateTimes[0].indexOf('h') !== -1) {
|
|
|
+ time = dateTimes[0]
|
|
|
+ } else if (dateTimes[0].indexOf('S') !== -1 || dateTimes[0].indexOf('s') !== -1) {
|
|
|
+ time = dateTimes[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //日期类型 YYYY年MM月DD日 YYYY-MM-DD HH:mm:ss
|
|
|
+ let dates = [], times = []
|
|
|
+ if (!isNullES(date)) {
|
|
|
+ if (date.indexOf('Y') !== -1 || date.indexOf('y') !== -1) {
|
|
|
+ dates.push('YYYY')
|
|
|
+ }
|
|
|
+ if (date.indexOf('M') !== -1 || date.indexOf('m') !== -1) {
|
|
|
+ dates.push('MM')
|
|
|
+ }
|
|
|
+ if (date.indexOf('D') !== -1 || date.indexOf('d') !== -1) {
|
|
|
+ dates.push('DD')
|
|
|
+ }
|
|
|
+ //分隔符
|
|
|
+ if (date.indexOf('年') !== -1 || date.indexOf('月') !== -1 || date.indexOf('日') !== -1) {
|
|
|
+ formModel.value.divide_y = '文本'
|
|
|
+ } else if (date.indexOf('-') !== -1) {
|
|
|
+ formModel.value.divide_y = '-'
|
|
|
+ } else if (date.indexOf('/') !== -1) {
|
|
|
+ formModel.value.divide_y = '/'
|
|
|
+ } else {
|
|
|
+ formModel.value.divide_y = '文本'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!isNullES(time)) {
|
|
|
+ if (time.indexOf('H') !== -1 || time.indexOf('h') !== -1) {
|
|
|
+ times.push('HH')
|
|
|
+ }
|
|
|
+ if (time.indexOf('M') !== -1 || time.indexOf('m') !== -1) {
|
|
|
+ times.push('mm')
|
|
|
+ }
|
|
|
+ if (time.indexOf('S') !== -1 || time.indexOf('s') !== -1) {
|
|
|
+ times.push('ss')
|
|
|
+ }
|
|
|
+ //分隔符
|
|
|
+ if (time.indexOf('时') !== -1 || time.indexOf('分') !== -1 || time.indexOf('秒') !== -1) {
|
|
|
+ formModel.value.divide_h = '文本'
|
|
|
+ } else if (time.indexOf(':') !== -1) {
|
|
|
+ formModel.value.divide_h = ':'
|
|
|
+ } else if (time.indexOf('/') !== -1) {
|
|
|
+ formModel.value.divide_h = '/'
|
|
|
+ } else {
|
|
|
+ formModel.value.divide_h = '文本'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ formModel.value.date = dates
|
|
|
+ formModel.value.time = times
|
|
|
+ if (type === 'daterange') {
|
|
|
+ formModel.value.divide_c = item.range || '文本'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//导出函数
|
|
|
+defineExpose({
|
|
|
+ setDomData,
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.hc-project-list-adjust-excel-set-e-visa :deep(.hc-card-item-box){
|
|
|
+ padding: 6px 14px 14px;
|
|
|
+ .hc-card-item-header {
|
|
|
+ color: #101010;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: unset;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
