style: 略微调整只读字段的表现形式
This commit is contained in:
gaoyunqi
@ -1,19 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="field-readonly">{{ fieldValue }}</div>
|
<div class="field-readonly">{{ fieldValue }}</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from 'vue';
|
import { ref, watch } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: String,
|
value: String,
|
||||||
schema: Object,
|
schema: Object,
|
||||||
});
|
});
|
||||||
const fieldValue = ref(props.value);
|
|
||||||
watch(
|
const fieldValue = ref(genFieldValue(props.value));
|
||||||
() => props.value,
|
|
||||||
(newValue) => {
|
function genFieldValue(val) {
|
||||||
fieldValue.value = newValue;
|
if (!props?.schema || (!val && val !== 0)) {
|
||||||
},
|
return '';
|
||||||
);
|
}
|
||||||
|
const schema = props.schema;
|
||||||
|
const { componentProps, component } = schema;
|
||||||
|
|
||||||
|
if (['Input', 'AutoCodeRule', 'DatePicker', 'InputTextArea'].includes(component)) {
|
||||||
|
return `${componentProps?.addonBefore || ''}${val}${componentProps?.addonAfter || ''}`;
|
||||||
|
}
|
||||||
|
if (component === 'Switch') {
|
||||||
|
return val === 1 ? '是' : '否';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.value,
|
||||||
|
(newValue) => {
|
||||||
|
fieldValue.value = genFieldValue(newValue);
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.field-readonly {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,131 +1,143 @@
|
|||||||
<template>
|
<template>
|
||||||
<div clas="itc-create-flow">
|
<div class="itc-create-flow">
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<a-space wrap>
|
<a-space wrap>
|
||||||
<a-button>提交</a-button>
|
<a-button>提交</a-button>
|
||||||
<a-button>暂存</a-button>
|
<a-button>暂存</a-button>
|
||||||
<a-button>关闭</a-button>
|
<a-button>关闭</a-button>
|
||||||
<a-button>打印</a-button>
|
<a-button>打印</a-button>
|
||||||
<a-button>流程图</a-button>
|
<a-button>流程图</a-button>
|
||||||
</a-space>
|
</a-space>
|
||||||
|
</div>
|
||||||
|
<div class="flow-content">
|
||||||
|
<FormInformation
|
||||||
|
:key="randKey"
|
||||||
|
ref="formInformation"
|
||||||
|
:disabled="false"
|
||||||
|
:formAssignmentData="data.formAssignmentData"
|
||||||
|
:formInfos="data.formInfos"
|
||||||
|
:opinions="data.opinions"
|
||||||
|
:opinionsComponents="data.opinionsComponents"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flow-content">
|
|
||||||
<FormInformation
|
|
||||||
:key="randKey"
|
|
||||||
ref="formInformation"
|
|
||||||
:disabled="false"
|
|
||||||
:formAssignmentData="data.formAssignmentData"
|
|
||||||
:formInfos="data.formInfos"
|
|
||||||
:opinions="data.opinions"
|
|
||||||
:opinionsComponents="data.opinionsComponents"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
||||||
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
||||||
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
|
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
|
||||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const tabStore = useMultipleTabStore();
|
const tabStore = useMultipleTabStore();
|
||||||
|
|
||||||
import { nextTick, onMounted, ref, toRaw } from 'vue';
|
import { nextTick, onMounted, ref, toRaw } from 'vue';
|
||||||
|
|
||||||
const { data, initProcessData } = userTaskItem();
|
const { data, initProcessData } = userTaskItem();
|
||||||
const currentRoute = router.currentRoute;
|
const currentRoute = router.currentRoute;
|
||||||
const rParams = currentRoute.value.query;
|
const rParams = currentRoute.value.query;
|
||||||
const rSchemaId = rParams.schemaId;
|
const rSchemaId = rParams.schemaId;
|
||||||
let formInformation = ref();
|
let formInformation = ref();
|
||||||
let randKey = ref('randkey'); // 强制表单重新渲染
|
let randKey = ref('randkey'); // 强制表单重新渲染
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
schemaId: {
|
schemaId: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
draftsJsonStr: {
|
draftsJsonStr: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
draftsId: {
|
draftsId: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
taskId: {
|
taskId: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
processId: {
|
processId: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
formData: {
|
formData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
},
|
},
|
||||||
formId: {
|
formId: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
rowKeyData: {
|
rowKeyData: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
if (props.processId) {
|
if (props.processId) {
|
||||||
// 重新发起
|
// 重新发起
|
||||||
let res = await getReStartProcessInfo(props.taskId, props.processId);
|
let res = await getReStartProcessInfo(props.taskId, props.processId);
|
||||||
res.taskApproveOpinions = [];
|
res.taskApproveOpinions = [];
|
||||||
initProcessData(res);
|
initProcessData(res);
|
||||||
} else if (props.schemaId && props.formId) {
|
} else if (props.schemaId && props.formId) {
|
||||||
let res = await getStartProcessInfo(props.schemaId);
|
let res = await getStartProcessInfo(props.schemaId);
|
||||||
|
|
||||||
if (props.formData && props.formId) {
|
if (props.formData && props.formId) {
|
||||||
res.formInfos.map((m) => {
|
res.formInfos.map((m) => {
|
||||||
if (m.formConfig.formId === props.formId) {
|
if (m.formConfig.formId === props.formId) {
|
||||||
m.formData = toRaw(props.formData);
|
m.formData = toRaw(props.formData);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
initProcessData(res);
|
||||||
|
} else {
|
||||||
|
// 发起流程
|
||||||
|
let res = await getStartProcessInfo(rSchemaId);
|
||||||
|
const title = res?.schemaInfo?.name;
|
||||||
|
if (title) {
|
||||||
|
tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
|
||||||
|
}
|
||||||
|
initProcessData(res);
|
||||||
}
|
}
|
||||||
});
|
} catch (error) {}
|
||||||
|
|
||||||
|
await nextTick();
|
||||||
|
initDraftsFormData();
|
||||||
|
|
||||||
|
randKey.value = Math.random() + '';
|
||||||
|
});
|
||||||
|
|
||||||
|
async function initDraftsFormData() {
|
||||||
|
//isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
|
||||||
|
if (props.draftsJsonStr) {
|
||||||
|
let formDataJson = JSON.parse(props.draftsJsonStr);
|
||||||
|
let formData = [];
|
||||||
|
|
||||||
|
data.formInfos.forEach((item) => {
|
||||||
|
if (
|
||||||
|
formDataJson &&
|
||||||
|
item.formConfig &&
|
||||||
|
item.formConfig.key &&
|
||||||
|
formDataJson[item.formConfig.key]
|
||||||
|
) {
|
||||||
|
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await formInformation.value.setFormData(formData);
|
||||||
}
|
}
|
||||||
initProcessData(res);
|
|
||||||
} else {
|
|
||||||
// 发起流程
|
|
||||||
let res = await getStartProcessInfo(rSchemaId);
|
|
||||||
const title = res?.schemaInfo?.name;
|
|
||||||
if (title) {
|
|
||||||
tabStore.changeTitle('new_' + rSchemaId, '新建 - ' + title);
|
|
||||||
}
|
|
||||||
initProcessData(res);
|
|
||||||
}
|
|
||||||
} catch (error) {}
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
initDraftsFormData();
|
|
||||||
|
|
||||||
randKey.value = Math.random() + '';
|
|
||||||
});
|
|
||||||
|
|
||||||
async function initDraftsFormData() {
|
|
||||||
//isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
|
|
||||||
if (props.draftsJsonStr) {
|
|
||||||
let formDataJson = JSON.parse(props.draftsJsonStr);
|
|
||||||
let formData = [];
|
|
||||||
|
|
||||||
data.formInfos.forEach((item) => {
|
|
||||||
if (
|
|
||||||
formDataJson &&
|
|
||||||
item.formConfig &&
|
|
||||||
item.formConfig.key &&
|
|
||||||
formDataJson[item.formConfig.key]
|
|
||||||
) {
|
|
||||||
formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
await formInformation.value.setFormData(formData);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.itc-create-flow {
|
||||||
|
padding: 10px 12px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user