style: 略微调整只读字段的表现形式
This commit is contained in:
gaoyunqi
@ -1,19 +1,42 @@
|
||||
<template>
|
||||
<div class="field-readonly">{{ fieldValue }}</div>
|
||||
<div class="field-readonly">{{ fieldValue }}</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
schema: Object,
|
||||
});
|
||||
const fieldValue = ref(props.value);
|
||||
watch(
|
||||
() => props.value,
|
||||
(newValue) => {
|
||||
fieldValue.value = newValue;
|
||||
},
|
||||
);
|
||||
const props = defineProps({
|
||||
value: String,
|
||||
schema: Object,
|
||||
});
|
||||
|
||||
const fieldValue = ref(genFieldValue(props.value));
|
||||
|
||||
function genFieldValue(val) {
|
||||
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>
|
||||
|
||||
<style>
|
||||
.field-readonly {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,131 +1,143 @@
|
||||
<template>
|
||||
<div clas="itc-create-flow">
|
||||
<div class="toolbar">
|
||||
<a-space wrap>
|
||||
<a-button>提交</a-button>
|
||||
<a-button>暂存</a-button>
|
||||
<a-button>关闭</a-button>
|
||||
<a-button>打印</a-button>
|
||||
<a-button>流程图</a-button>
|
||||
</a-space>
|
||||
<div class="itc-create-flow">
|
||||
<div class="toolbar">
|
||||
<a-space wrap>
|
||||
<a-button>提交</a-button>
|
||||
<a-button>暂存</a-button>
|
||||
<a-button>关闭</a-button>
|
||||
<a-button>打印</a-button>
|
||||
<a-button>流程图</a-button>
|
||||
</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 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>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
||||
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
||||
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||
import { useRouter } from 'vue-router';
|
||||
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
||||
import FormInformation from '/@/views/secondDev/FormInformation.vue';
|
||||
import { getStartProcessInfo, getReStartProcessInfo } from '/@/api/workflow/task';
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||
|
||||
const router = useRouter();
|
||||
const tabStore = useMultipleTabStore();
|
||||
const router = useRouter();
|
||||
const tabStore = useMultipleTabStore();
|
||||
|
||||
import { nextTick, onMounted, ref, toRaw } from 'vue';
|
||||
import { nextTick, onMounted, ref, toRaw } from 'vue';
|
||||
|
||||
const { data, initProcessData } = userTaskItem();
|
||||
const currentRoute = router.currentRoute;
|
||||
const rParams = currentRoute.value.query;
|
||||
const rSchemaId = rParams.schemaId;
|
||||
let formInformation = ref();
|
||||
let randKey = ref('randkey'); // 强制表单重新渲染
|
||||
const { data, initProcessData } = userTaskItem();
|
||||
const currentRoute = router.currentRoute;
|
||||
const rParams = currentRoute.value.query;
|
||||
const rSchemaId = rParams.schemaId;
|
||||
let formInformation = ref();
|
||||
let randKey = ref('randkey'); // 强制表单重新渲染
|
||||
|
||||
const props = defineProps({
|
||||
schemaId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
draftsJsonStr: {
|
||||
type: String,
|
||||
},
|
||||
draftsId: {
|
||||
type: String,
|
||||
},
|
||||
taskId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
processId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
},
|
||||
formId: {
|
||||
type: String,
|
||||
},
|
||||
rowKeyData: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
const props = defineProps({
|
||||
schemaId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
draftsJsonStr: {
|
||||
type: String,
|
||||
},
|
||||
draftsId: {
|
||||
type: String,
|
||||
},
|
||||
taskId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
processId: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
},
|
||||
formId: {
|
||||
type: String,
|
||||
},
|
||||
rowKeyData: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
if (props.processId) {
|
||||
// 重新发起
|
||||
let res = await getReStartProcessInfo(props.taskId, props.processId);
|
||||
res.taskApproveOpinions = [];
|
||||
initProcessData(res);
|
||||
} else if (props.schemaId && props.formId) {
|
||||
let res = await getStartProcessInfo(props.schemaId);
|
||||
onMounted(async () => {
|
||||
try {
|
||||
if (props.processId) {
|
||||
// 重新发起
|
||||
let res = await getReStartProcessInfo(props.taskId, props.processId);
|
||||
res.taskApproveOpinions = [];
|
||||
initProcessData(res);
|
||||
} else if (props.schemaId && props.formId) {
|
||||
let res = await getStartProcessInfo(props.schemaId);
|
||||
|
||||
if (props.formData && props.formId) {
|
||||
res.formInfos.map((m) => {
|
||||
if (m.formConfig.formId === props.formId) {
|
||||
m.formData = toRaw(props.formData);
|
||||
if (props.formData && props.formId) {
|
||||
res.formInfos.map((m) => {
|
||||
if (m.formConfig.formId === props.formId) {
|
||||
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>
|
||||
|
||||
<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