|
|
@@ -0,0 +1,285 @@
|
|
|
+<template>
|
|
|
+ <a-spin :spinning="loading">
|
|
|
+ <JFormContainer :disabled="disabled">
|
|
|
+ <template #detail>
|
|
|
+ <a-form v-bind="formItemLayout" name="approvalProcessConfigForm" ref="formRef">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item
|
|
|
+ label="表单(tableId)"
|
|
|
+ v-bind="validateInfos.tableId"
|
|
|
+ id="approvalProcessConfigForm-tableId"
|
|
|
+ name="tableId"
|
|
|
+ :labelCol="formItemLayout.labelCol1"
|
|
|
+ :wrapperCol="formItemLayout.wrapperCol1"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formData.tableId" placeholder="" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item label="是否启用(status)" v-bind="validateInfos.status" id="approvalProcessConfigForm-status" name="status">
|
|
|
+ <JDictSelectTag
|
|
|
+ v-model:value="formData.status"
|
|
|
+ placeholder="请选择"
|
|
|
+ dictCode="yes_or_no"
|
|
|
+ style="width: 100%"
|
|
|
+ stringToNumber
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-form-item
|
|
|
+ label="描述(tableName)"
|
|
|
+ v-bind="validateInfos.tableName"
|
|
|
+ id="approvalProcessConfigForm-tableName"
|
|
|
+ name="tableName"
|
|
|
+ >
|
|
|
+ <a-input v-model:value="formData.tableName" placeholder="请输入" allow-clear AutoComplete="off" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </template>
|
|
|
+ </JFormContainer>
|
|
|
+
|
|
|
+ <!-- 子表单区域 -->
|
|
|
+ <a-tabs v-model:activeKey="activeKey" animated style="padding: 24px; padding-top: 0px">
|
|
|
+ <a-tab-pane tab="审批流程配置" key="approvalProcessConfigForm" :forceRender="true">
|
|
|
+ <!-- <a-button type="primary" style="margin-right: 1%; margin-bottom: 1%" @click="selectDeliveryList">
|
|
|
+ 增行(select delevery notice)</a-button> -->
|
|
|
+ <j-vxe-table
|
|
|
+ :keep-source="true"
|
|
|
+ resizable
|
|
|
+ toolbar
|
|
|
+ ref="approvalProcessConfigFormTableRef"
|
|
|
+ :loading="approvalProcessConfigFormTable.loading"
|
|
|
+ :columns="approvalProcessConfigFormTable.columns"
|
|
|
+ :dataSource="approvalProcessConfigFormTable.dataSource"
|
|
|
+ :maxHeight="340"
|
|
|
+ :disabled="disabled"
|
|
|
+ :rowNumber="true"
|
|
|
+ :rowSelection="true"
|
|
|
+ asyncRemove
|
|
|
+ >
|
|
|
+ <template #action="props">
|
|
|
+ <a-popconfirm title="确定删除吗？" @confirm="handleDelete1(props)">
|
|
|
+ <a>删除(delete)</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </j-vxe-table>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </a-spin>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent, ref, reactive, computed, toRaw, onMounted } from 'vue';
|
|
|
+ import { defHttp } from '/@/utils/http/axios';
|
|
|
+ import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
|
|
|
+ import {querySonTable,queryDataById,saveOrUpdate, queryDeliverDataById} from '..approvalProcessConfigForm.api';
|
|
|
+ import { JVxeTable } from '/@/components/jeecg/JVxeTable';
|
|
|
+ import { SonTableColumns } from '../approvalProcessConfigForm.data';
|
|
|
+ import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
|
|
+ import { JDictSelectTag, JSelectMultiple } from '/@/components/Form';
|
|
|
+ import { ApiSelect } from '/@/components/Form/index';
|
|
|
+ import { Form, message } from 'ant-design-vue';
|
|
|
+ const useForm = Form.useForm;
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'SaleInvoiceForm',
|
|
|
+ components: {
|
|
|
+ JVxeTable,
|
|
|
+ JFormContainer,
|
|
|
+ JDictSelectTag,
|
|
|
+ JSelectMultiple,
|
|
|
+ ApiSelect,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ formDisabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ formData: { type: Object, default: () => {} },
|
|
|
+ formBpm: { type: Boolean, default: true },
|
|
|
+ },
|
|
|
+ emits: ['success'],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const loading = ref(false);
|
|
|
+ const formRef = ref();
|
|
|
+ const approvalProcessConfigFormTableRef = ref();
|
|
|
+ const approvalProcessConfigFormTable = reactive<Record<string, any>>({
|
|
|
+ loading: false,
|
|
|
+ columns: SonTableColumns,
|
|
|
+ dataSource: [],
|
|
|
+ });
|
|
|
+ const activeKey = ref('approvalProcessConfigForm');
|
|
|
+ const formData = reactive<Record<string, any>>({
|
|
|
+ id: '',
|
|
|
+ status: 1,
|
|
|
+ tableName:'',
|
|
|
+ tableId:''
|
|
|
+ });
|
|
|
+
|
|
|
+ //表单验证
|
|
|
+ const validatorRules = reactive({
|
|
|
+ tableId: [
|
|
|
+ { required: true, message: '请输入' }
|
|
|
+ ],
|
|
|
+ status: [
|
|
|
+ { required: true, message: '请选择' }
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
|
|
|
+ const dbData = {};
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: { xs: { span: 24 }, sm: { span: 8 } },
|
|
|
+ wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
|
|
+ labelCol1: { xs: { span: 24 }, sm: { span: 8 } },
|
|
|
+ wrapperCol1: { xs: { span: 24 }, sm: { span: 13 } },
|
|
|
+ };
|
|
|
+
|
|
|
+ // 表单禁用
|
|
|
+ const disabled = computed(() => {
|
|
|
+ if (props.formBpm === true) {
|
|
|
+ if (props.formData.disabled === false) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return props.formDisabled;
|
|
|
+ });
|
|
|
+
|
|
|
+ //新增方法
|
|
|
+ function add() {
|
|
|
+ resetFields();
|
|
|
+ approvalProcessConfigFormTable.dataSource = [];
|
|
|
+ activeKey.value = 'approvalProcessConfigForm';
|
|
|
+ }
|
|
|
+ //编辑方法
|
|
|
+ async function edit(row) {
|
|
|
+ //主表数据
|
|
|
+ await queryMainData(row.id);
|
|
|
+ //子表数据
|
|
|
+ const approvalProcessConfigFormDataList = await querySonTable(row['id']);
|
|
|
+ approvalProcessConfigFormTable.dataSource = [...approvalProcessConfigFormDataList];
|
|
|
+ }
|
|
|
+ //获取主表
|
|
|
+ async function queryMainData(id) {
|
|
|
+ const row = await queryDataById(id);
|
|
|
+ resetFields();
|
|
|
+ const tmpData = {};
|
|
|
+ Object.keys(formData).forEach((key) => {
|
|
|
+ if (row.hasOwnProperty(key)) {
|
|
|
+ tmpData[key] = row[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //赋值
|
|
|
+ Object.assign(formData, tmpData);
|
|
|
+ }
|
|
|
+
|
|
|
+ const { getSubFormAndTableData, transformData } = useValidateAntFormAndTable(activeKey, {
|
|
|
+ baseApproverSetInfo: approvalProcessConfigFormTableRef,
|
|
|
+ });
|
|
|
+ //获取表单信息
|
|
|
+ async function getFormData() {
|
|
|
+ try {
|
|
|
+ // 触发表单验证
|
|
|
+ await validate();
|
|
|
+ } catch ({ errorFields }) {
|
|
|
+ if (errorFields) {
|
|
|
+ const firstField = errorFields[0];
|
|
|
+ if (firstField) {
|
|
|
+ formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return Promise.reject(errorFields);
|
|
|
+ }
|
|
|
+ return transformData(toRaw(formData));
|
|
|
+ }
|
|
|
+ //保存
|
|
|
+ async function submitForm() {
|
|
|
+ approvalProcessConfigFormTableRef.value!.validateTable().then(async (errMap) => {
|
|
|
+ if (errMap) {
|
|
|
+ console.log('表单验证未通过：', { errMap });
|
|
|
+ } else {
|
|
|
+ const mainData = await getFormData();
|
|
|
+ const subData = await getSubFormAndTableData();
|
|
|
+ const values = Object.assign({}, dbData, mainData, subData);
|
|
|
+ console.log('表单提交数据', values);
|
|
|
+ const isUpdate = values.id ? true : false;
|
|
|
+ await saveOrUpdate(values, isUpdate);
|
|
|
+ //关闭弹窗
|
|
|
+ emit('success');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function setFieldsValue(values) {
|
|
|
+ if (values) {
|
|
|
+ Object.keys(values).map((k) => {
|
|
|
+ formData[k] = values[k];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 值改变事件触发-树控件回调
|
|
|
+ * @param key
|
|
|
+ * @param value
|
|
|
+ */
|
|
|
+ function handleFormChange(key, value) {
|
|
|
+ formData[key] = value;
|
|
|
+ }
|
|
|
+ //产品明细-删除行
|
|
|
+ async function handleDelete1(prop) {
|
|
|
+ var xTable = approvalProcessConfigFormTableRef.value!.getXTable();
|
|
|
+ var newArray = [...xTable.data];
|
|
|
+ newArray.splice(prop.rowIndex, 1);
|
|
|
+ approvalProcessConfigFormTable.dataSource = newArray;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ approvalProcessConfigFormTableRef,
|
|
|
+ approvalProcessConfigFormTable,
|
|
|
+ validatorRules,
|
|
|
+ validateInfos,
|
|
|
+ activeKey,
|
|
|
+ loading,
|
|
|
+ formData,
|
|
|
+ setFieldsValue,
|
|
|
+ handleFormChange,
|
|
|
+ formItemLayout,
|
|
|
+ disabled,
|
|
|
+ getFormData,
|
|
|
+ submitForm,
|
|
|
+ add,
|
|
|
+ edit,
|
|
|
+ formRef,
|
|
|
+ handleDelete1
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ /** 时间和数字输入框样式 */
|
|
|
+ :deep(.ant-input-number) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ant-calendar-picker) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ /deep/.vxe-table--body-wrapper {
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ /deep/.ant-modal-body {
|
|
|
+ padding: 24px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.ant-form-item {
|
|
|
+ margin-bottom: 8px !important;
|
|
|
+ }
|
|
|
+ /deep/.vxe-cell--valid-error-msg{
|
|
|
+ color: white !important;
|
|
|
+ background-color: white !important;
|
|
|
+ }
|
|
|
+</style>
|
