|
|
@@ -21,7 +21,11 @@
|
|
|
<div class="title">基本信息</div>
|
|
|
<div class="form-continer">
|
|
|
<a-form-item label="业务类型" name="type">
|
|
|
- <a-select v-model:value="formState.type" placeholder="请选择业务类型">
|
|
|
+ <a-select
|
|
|
+ v-model:value="formState.type"
|
|
|
+ placeholder="请选择业务类型"
|
|
|
+ :disabled="getTitle === '查看流程配置'"
|
|
|
+ >
|
|
|
<template v-for="item in dicBusiness" :key="item.value">
|
|
|
<a-select-option :value="item.value">{{ item.label }}</a-select-option>
|
|
|
</template>
|
|
|
@@ -34,11 +38,13 @@
|
|
|
<div class="form-continer">
|
|
|
<div class="left-continer">
|
|
|
<a-table
|
|
|
- v-if="dataSource.length > 0"
|
|
|
+ v-if="formState.steps.length > 0"
|
|
|
bordered
|
|
|
- :data-source="dataSource"
|
|
|
+ rowKey="xh"
|
|
|
+ :data-source="formState.steps"
|
|
|
:columns="pColumns"
|
|
|
:pagination="false"
|
|
|
+ :customRow="customRow"
|
|
|
style="height: 100%"
|
|
|
>
|
|
|
<template #operation="{ record }">
|
|
|
@@ -47,7 +53,11 @@
|
|
|
</a-table>
|
|
|
</div>
|
|
|
<div class="right-continer">
|
|
|
- <add-step-form :currStep="currStep" @editStep="updateStep"></add-step-form>
|
|
|
+ <add-step-form
|
|
|
+ :currStep="currStep"
|
|
|
+ @editStep="updateStep"
|
|
|
+ @reduceStep="reduceStep"
|
|
|
+ ></add-step-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -64,7 +74,6 @@ import {
|
|
|
unref,
|
|
|
reactive,
|
|
|
onMounted,
|
|
|
- watch,
|
|
|
UnwrapRef,
|
|
|
toRaw,
|
|
|
nextTick,
|
|
|
@@ -73,13 +82,17 @@ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
|
|
import { accountFormSchema, accountFormSchema2, busType, stepColumns } from './configData';
|
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
-import { cloneDeep } from 'lodash-es';
|
|
|
-import { addFileResource } from '../../api/fileUploadApi';
|
|
|
import AddStepForm from './addStepForm.vue';
|
|
|
-
|
|
|
+interface StepInfo {
|
|
|
+ xh: number;
|
|
|
+ name: string;
|
|
|
+ model: string;
|
|
|
+ dept: string[];
|
|
|
+ user: string[];
|
|
|
+}
|
|
|
interface FormState {
|
|
|
type: string;
|
|
|
- steps: Object[];
|
|
|
+ steps: StepInfo[];
|
|
|
}
|
|
|
export default defineComponent({
|
|
|
name: 'AccountModal',
|
|
|
@@ -94,10 +107,10 @@ export default defineComponent({
|
|
|
let show1 = ref(true);
|
|
|
const isUpdate = ref(true);
|
|
|
const rowId = ref('');
|
|
|
- const postData = reactive({});
|
|
|
+ const postData = ref(null);
|
|
|
const formState: UnwrapRef<FormState> = reactive({
|
|
|
type: '',
|
|
|
- steps: [],
|
|
|
+ steps: ref([{ xh: 1, name: '', model: 'update', dept: [], user: [] }]),
|
|
|
});
|
|
|
const rules = {
|
|
|
type: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
|
|
|
@@ -105,9 +118,10 @@ export default defineComponent({
|
|
|
};
|
|
|
const dicBusiness = busType;
|
|
|
const pColumns = stepColumns;
|
|
|
- let currStep = ref({ xh: 1, name: '', code: '' });
|
|
|
- const dataSource = [{ xh: 1, name: '', code: 'update' }];
|
|
|
- onMounted(async () => {});
|
|
|
+ const currStep = ref(null);
|
|
|
+ onMounted(async () => {
|
|
|
+ //判断当前类型是否新增
|
|
|
+ });
|
|
|
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
|
|
|
labelWidth: 100,
|
|
|
schemas: show1 ? accountFormSchema : accountFormSchema2,
|
|
|
@@ -121,23 +135,20 @@ export default defineComponent({
|
|
|
await resetFields();
|
|
|
setModalProps({ confirmLoading: false });
|
|
|
isUpdate.value = !!data?.isUpdate;
|
|
|
+ postData.value = data?.record ? data?.record : null;
|
|
|
if (unref(isUpdate)) {
|
|
|
rowId.value = data.record.id;
|
|
|
setFieldsValue(data.record);
|
|
|
}
|
|
|
});
|
|
|
- const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
|
|
|
|
|
+ const getTitle = computed(() =>
|
|
|
+ !unref(isUpdate) ? (unref(postData) ? '查看流程配置' : '新增流程配置') : '编辑流程配置'
|
|
|
+ );
|
|
|
async function handleSubmit() {
|
|
|
setModalProps({ confirmLoading: true });
|
|
|
try {
|
|
|
const { createMessage } = useMessage();
|
|
|
- const values = await validate(['parentId']);
|
|
|
- Object.assign(postData, values);
|
|
|
-
|
|
|
- console.log('准备传递的参数' + JSON.stringify(postData));
|
|
|
-
|
|
|
- await addFileResource(paramsToFormData(postData as any), unref(isUpdate));
|
|
|
closeModal();
|
|
|
emit('success');
|
|
|
createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
|
|
|
@@ -147,6 +158,7 @@ export default defineComponent({
|
|
|
}, 300);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
function preProcessData(data) {
|
|
|
Object.keys(data).forEach((item) => {
|
|
|
if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
|
|
|
@@ -175,19 +187,34 @@ export default defineComponent({
|
|
|
* 编辑步骤
|
|
|
*/
|
|
|
const editStep = (row) => {
|
|
|
- console.log('编辑步骤', row);
|
|
|
- currStep = row;
|
|
|
+ currStep.value = row;
|
|
|
};
|
|
|
|
|
|
const updateStep = (row) => {
|
|
|
nextTick(() => {
|
|
|
- dataSource.forEach((item) => {
|
|
|
- if (item.xh === row.xh) item.name = row.name;
|
|
|
- });
|
|
|
- console.log('数据改变了', dataSource);
|
|
|
+ const obj = formState.steps.find((item) => item.xh === row.xh);
|
|
|
+ if (obj) {
|
|
|
+ formState.steps.forEach((item) => {
|
|
|
+ if (item.xh === row.xh) {
|
|
|
+ for (const key in row) {
|
|
|
+ item[key] = row[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formState.steps.push(row);
|
|
|
+ }
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const reduceStep = (row) => {
|
|
|
+ const obj = formState.steps.find((item) => item.xh === row.xh);
|
|
|
+ const index = formState.steps.indexOf(obj as any);
|
|
|
+ if (index > -1) formState.steps.splice(index, 1);
|
|
|
+ //当前数据显示最后一个
|
|
|
+ currStep.value = formState.steps[formState.steps.length - 1];
|
|
|
+ };
|
|
|
+
|
|
|
const onSubmit = () => {
|
|
|
formRef.value
|
|
|
.validate()
|
|
|
@@ -202,14 +229,30 @@ export default defineComponent({
|
|
|
formRef.value.resetFields();
|
|
|
};
|
|
|
|
|
|
+ const customRow = (record, index) => {
|
|
|
+ return {
|
|
|
+ on: {
|
|
|
+ // 鼠标单击行
|
|
|
+ click: (event) => {
|
|
|
+ debugger
|
|
|
+ event.currentTarget.parentNode.querySelectorAll('tr').forEach((item) => {
|
|
|
+ item.style.background = 'white';
|
|
|
+ });
|
|
|
+ event.currentTarget.style.background = 'green';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
return {
|
|
|
+ postData,
|
|
|
formRef,
|
|
|
formState,
|
|
|
rules,
|
|
|
dicBusiness,
|
|
|
pColumns,
|
|
|
currStep,
|
|
|
- dataSource,
|
|
|
+ customRow,
|
|
|
registerModal,
|
|
|
registerForm,
|
|
|
handleSubmit,
|
|
|
@@ -219,6 +262,7 @@ export default defineComponent({
|
|
|
resetForm,
|
|
|
editStep,
|
|
|
updateStep,
|
|
|
+ reduceStep,
|
|
|
};
|
|
|
},
|
|
|
});
|