修改供应商图片不展示的问题

This commit is contained in:
yangjun 2026-01-20 11:12:49 +08:00
parent 255445feb5
commit 2f8316532d
5 changed files with 440 additions and 319 deletions

View File

@ -122,6 +122,7 @@ const formData = reactive<Record<string, any>>({
suppliersNature_dictText: '', suppliersNature_dictText: '',
applyId: '', applyId: '',
suppliersId: '', suppliersId: '',
sourceType: '',
}); });
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } });

View File

@ -46,6 +46,19 @@ export const columns: BasicColumn[] = [
dataIndex: 'izEnabled_dictText', dataIndex: 'izEnabled_dictText',
width:'100px' width:'100px'
}, },
{
title: '来源',
align: "center",
dataIndex: 'sourceType',
width:'100px',
customRender: ({ text, record }) => {
if (text == '1') {
return '平台新增';
}else{
return '小程序注册';
}
},
},
// { // {
// title: '开户行账号', // title: '开户行账号',
// align:"center", // align:"center",
@ -192,10 +205,10 @@ export const formSchema: FormSchema[] = [
{ {
label: '资质照片', label: '资质照片',
field: 'imgPath', field: 'imgPath',
component: 'JImageUpload', component: 'JImageUpload',
componentProps:{ componentProps:{
fileMax: 1 fileMax: 1
}, },
}, },
// TODO 主键隐藏字段目前写死为ID // TODO 主键隐藏字段目前写死为ID
{ {

View File

@ -6,123 +6,111 @@
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :lg="6"> <a-col :lg="6">
<a-form-item name="suppliersName"> <a-form-item name="suppliersName">
<template #label><span title="供应商名称">供应商名</span></template> <template #label><span title="供应商名称">供应商名</span></template>
<j-input placeholder="请输入供应商名称" v-model:value="queryParam.suppliersName" allow-clear ></j-input> <a-input placeholder="请输入供应商名称" v-model:value="queryParam.suppliersName" allow-clear ></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6"> <a-col :lg="6">
<a-form-item name="personInCharge"> <a-form-item name="personInCharge">
<template #label><span title="负责人">负责人</span></template> <template #label><span title="负责人">负责人</span></template>
<j-input placeholder="请输入负责人" v-model:value="queryParam.personInCharge" allow-clear ></j-input> <a-input placeholder="请输入负责人" v-model:value="queryParam.personInCharge" allow-clear ></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<template v-if="toggleSearchStatus">
<a-col :lg="6"> <a-col :lg="6">
<a-form-item name="supplyState"> <a-form-item name="contactNumber">
<template #label><span title="供应状态">供应状态</span></template> <template #label><span title="联系电话">联系电话</span></template>
<j-dict-select-tag type='list' placeholder="请选择供应状态" v-model:value="queryParam.supplyState" dictCode="supply_state" allow-clear /> <a-input placeholder="请输入联系电话" v-model:value="queryParam.contactNumber" allow-clear ></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6"> </template>
<a-form-item name="izEnabled"> <a-col :xl="6" :lg="7" :md="8" :sm="24">
<template #label><span title="是否启用">是否启用</span></template>
<j-dict-select-tag type='list' placeholder="请选择是否启用" v-model:value="queryParam.izEnabled" dictCode="iz_enabled" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6"> <a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
{{ toggleSearchStatus ? '收起' : '展开' }}
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
</a>
</a-col> </a-col>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<div>
{{registerTable.tableData}}
</div>
<!--引用表格--> <!--引用表格-->
<BasicTable @register="registerTable"> <BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题--> <!--插槽:table标题-->
<template #tableTitle> <template #tableTitle>
<a-button type="primary" v-auth="'configSuppliersInfo:config_suppliers_info:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> <a-button type="primary" v-auth="'configSuppliersInfo:config_suppliers_info:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="'configSuppliersInfo:config_suppliers_info:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="'configSuppliersInfo:config_suppliers_info:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
</template> </template>
<!--操作栏--> <!--操作栏-->
<template #action="{ record }"> <template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/> <TableAction :actions="getTableAction(record)" />
</template> </template>
<!--字段回显插槽-->
<template v-slot:bodyCell="{ column, record, index, text }"> <template v-slot:bodyCell="{ column, record, index, text }">
</template> </template>
</BasicTable> </BasicTable>
<!-- 表单区域 --> <!-- 表单区域 -->
<ConfigSuppliersInfoModal @register="registerDrawer" @success="handleSuccess"></ConfigSuppliersInfoModal> <ConfigSuppliersInfoModal ref="registerModal" @success="handleSuccess"></ConfigSuppliersInfoModal>
</div> </div>
</template> </template>
<script lang="ts" name="configSuppliersInfo-configSuppliersInfo" setup> <script lang="ts" name="configSuppliersInfo-configSuppliersInfo" setup>
import {ref, reactive, computed, unref ,onMounted} from 'vue'; import { ref, reactive } from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table'; import { BasicTable, useTable, TableAction } from '/@/components/Table';
import {useModal} from '/@/components/Modal'; import { useListPage } from '/@/hooks/system/useListPage';
import { useListPage } from '/@/hooks/system/useListPage' import { columns, superQuerySchema } from './ConfigSuppliersInfo.data';
import ConfigSuppliersInfoModal from './components/ConfigSuppliersInfoModal.vue' import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './ConfigSuppliersInfo.api';
import {columns, searchFormSchema, superQuerySchema} from './ConfigSuppliersInfo.data';
import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './ConfigSuppliersInfo.api';
import { downloadFile } from '/@/utils/common/renderUtils'; import { downloadFile } from '/@/utils/common/renderUtils';
import ConfigSuppliersInfoModal from './components/ConfigSuppliersInfoModal.vue'
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useDrawer } from '/@/components/Drawer';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
const userStore = useUserStore();
const formRef = ref();
//model
const [registerModal, {openModal}] = useModal();
//drawer
const [registerDrawer, { openDrawer }] = useDrawer();
//table
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
tableProps:{
title: '供应商',
api: list,
columns,
canResize:false,
showIndexColumn: true,
actionColumn: {
width: 160,
fixed:'right'
},
beforeFetch: (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name:"供应商",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
})
const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext const formRef = ref();
const labelCol = reactive({ const queryParam = reactive<any>({});
const toggleSearchStatus = ref<boolean>(false);
const registerModal = ref();
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '供应商信息',
api: list,
columns,
canResize:false,
useSearchForm: false,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
exportConfig: {
name: "供应商信息",
url: getExportUrl,
params: queryParam,
},
importConfig: {
url: getImportUrl,
success: handleSuccess
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24, xs:24,
sm:6, sm:4,
xl:6, xl:6,
xxl:6 xxl:4
}); });
const wrapperCol = reactive({ const wrapperCol = reactive({
xs: 24, xs: 24,
sm: 24, sm: 20,
}); });
// //
const superQueryConfig = reactive(superQuerySchema); const superQueryConfig = reactive(superQuerySchema);
@ -133,83 +121,64 @@ const labelCol = reactive({
Object.keys(params).map((k) => { Object.keys(params).map((k) => {
queryParam[k] = params[k]; queryParam[k] = params[k];
}); });
reload(); searchQuery();
} }
/** /**
* 查询 * 新增事件
*/ */
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
/**
* 新增事件
*/
function handleAdd() { function handleAdd() {
openDrawer(true, { registerModal.value.disableSubmit = false;
isUpdate: false, registerModal.value.add();
showFooter: true,
tenantSaas: false,
});
} }
/**
* 编辑事件 /**
*/ * 编辑事件
*/
function handleEdit(record: Recordable) { function handleEdit(record: Recordable) {
openDrawer(true, { registerModal.value.disableSubmit = false;
record, registerModal.value.edit(record);
isUpdate: true, }
showFooter: true,
tenantSaas: false, /**
}); * 详情
}
/**
* 详情
*/ */
function handleDetail(record: Recordable) { function handleDetail(record: Recordable) {
openDrawer(true, { registerModal.value.disableSubmit = true;
record, registerModal.value.edit(record);
isUpdate: true, }
showFooter: false,
tenantSaas: false, /**
}); * 删除事件
} */
/**
* 删除事件
*/
async function handleDelete(record) { async function handleDelete(record) {
await deleteOne({id: record.id}, handleSuccess); await deleteOne({ id: record.id }, handleSuccess);
} }
/**
* 批量删除事件 /**
*/ * 批量删除事件
*/
async function batchHandleDelete() { async function batchHandleDelete() {
await batchDelete({ids: selectedRowKeys.value}, handleSuccess); await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
} }
/**
* 成功回调 /**
*/ * 成功回调
*/
function handleSuccess() { function handleSuccess() {
(selectedRowKeys.value = []) && reload(); (selectedRowKeys.value = []) && reload();
} }
/**
* 操作栏 /**
*/ * 操作栏
function getTableAction(record){ */
return [ function getTableAction(record) {
{ return [
{
label: '编辑', label: '编辑',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record),
auth: 'configSuppliersInfo:config_suppliers_info:edit' auth: 'configSuppliersInfo:config_suppliers_info:edit',
ifShow: record.sourceType == '1'
}, },
{ {
label: '详情', label: '详情',
@ -234,9 +203,10 @@ const labelCol = reactive({
onClick: handleWlQyty.bind(null, record), onClick: handleWlQyty.bind(null, record),
ifShow: record.izEnabled == 'Y' ifShow: record.izEnabled == 'Y'
}, },
] ];
} }
//
//
function handleWlQyty(record){ function handleWlQyty(record){
console.log("🚀 ~ handleWlQyty ~ record:", record) console.log("🚀 ~ handleWlQyty ~ record:", record)
const izEnabled = record.izEnabled == 'N' ? 'Y' : "N" const izEnabled = record.izEnabled == 'N' ? 'Y' : "N"
@ -245,18 +215,51 @@ const labelCol = reactive({
searchQuery() searchQuery()
}); });
} }
/**
* 下拉操作栏 /**
*/ * 下拉操作栏
function getDropDownAction(record){ */
return [ function getDropDownAction(record) {
] return [
} {
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '删除',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
placement: 'topLeft',
},
auth: 'configSuppliersInfo:nu_config_suppliers_info:delete'
}
]
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
reload();
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.jeecg-basic-table-form-container { .jeecg-basic-table-form-container {
padding: 0; padding: 0;
.table-page-search-submitButtons { .table-page-search-submitButtons {
display: block; display: block;
@ -279,7 +282,4 @@ const labelCol = reactive({
width: 100%; width: 100%;
} }
} }
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
</style> </style>

View File

@ -1,70 +1,202 @@
<template> <template>
<div style="min-height: 400px"> <a-spin :spinning="confirmLoading">
<BasicForm @register="registerForm"></BasicForm> <JFormContainer :disabled="disabled">
<div style="width: 100%;text-align: center" v-if="!formDisabled"> <template #detail>
<a-button @click="submitForm" pre-icon="ant-design:check" type="primary"> </a-button> <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="ConfigSuppliersInfoForm">
</div> <a-row>
</div> <a-col :span="24">
<a-form-item label="供应商名称" v-bind="validateInfos.suppliersName" id="ConfigSuppliersInfoForm-suppliersName" name="suppliersName">
<a-input v-model:value="formData.suppliersName" placeholder="请输入供应商名称" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="供应商性质" v-bind="validateInfos.suppliersNature" id="ConfigSuppliersInfoForm-suppliersNature" name="suppliersNature">
<j-dict-select-tag type='radio' v-model:value="formData.suppliersNature" dictCode="suppliers_nature" placeholder="请选择供应商性质" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="供应商地址" v-bind="validateInfos.suppliersAddress" id="ConfigSuppliersInfoForm-suppliersAddress" name="suppliersAddress">
<a-input v-model:value="formData.suppliersAddress" placeholder="请输入供应商地址" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="负责人" v-bind="validateInfos.personInCharge" id="ConfigSuppliersInfoForm-personInCharge" name="personInCharge">
<a-input v-model:value="formData.personInCharge" placeholder="请输入负责人" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="联系电话" v-bind="validateInfos.contactNumber" id="ConfigSuppliersInfoForm-contactNumber" name="contactNumber">
<a-input v-model:value="formData.contactNumber" placeholder="请输入联系电话" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="供应状态" v-bind="validateInfos.supplyState" id="ConfigSuppliersInfoForm-supplyState" name="supplyState">
<j-dict-select-tag type='radio' v-model:value="formData.supplyState" dictCode="supply_state" placeholder="请选择供应状态" allow-clear />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="开户行" v-bind="validateInfos.openingBank" id="ConfigSuppliersInfoForm-openingBank" name="openingBank">
<a-input v-model:value="formData.openingBank" placeholder="请输入开户行" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="开户行账号" v-bind="validateInfos.openingBankNo" id="ConfigSuppliersInfoForm-openingBankNo" name="openingBankNo">
<a-input v-model:value="formData.openingBankNo" placeholder="请输入开户行账号" allow-clear ></a-input>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="资质照片" v-bind="validateInfos.imgPath" id="ConfigSuppliersInfoForm-imgPath" name="imgPath">
<j-image-upload :fileMax="1" v-model:value="formData.imgPath" v-if="formData.sourceType == '1'" ></j-image-upload>
<j-image-upload v-if="formData.sourceType == '2'" :fileMax="1" :value="opeMediaAddress + formData.imgPath"
disabled></j-image-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
</a-spin>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import {BasicForm, useForm} from '/@/components/Form/index'; import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import {computed, defineComponent} from 'vue'; import { defHttp } from '/@/utils/http/axios';
import {defHttp} from '/@/utils/http/axios'; import { useMessage } from '/@/hooks/web/useMessage';
import { propTypes } from '/@/utils/propTypes'; import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {getBpmFormSchema} from '../ConfigSuppliersInfo.data'; import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import {saveOrUpdate} from '../ConfigSuppliersInfo.api'; import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../ConfigSuppliersInfo.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
const opeMediaAddress = import.meta.env.VITE_OPE_MEDIA_ADDRESS
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: () => ({})},
formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
id: '',
suppliersName: '',
suppliersNature: '',
suppliersAddress: '',
personInCharge: '',
contactNumber: '',
supplyState: '',
openingBank: '',
openingBankNo: '',
imgPath: '',
sourceType:'1',
izEnabled: 'Y'
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//
const validatorRules = reactive({
suppliersName: [{ required: true, message: '请输入供应商名称!'},],
suppliersNature: [{ required: true, message: '请输入供应商性质!'},],
personInCharge: [{ required: true, message: '请输入负责人!'},],
contactNumber: [{ required: true, message: '请输入联系电话!'}, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码!'},],
supplyState: [{ required: true, message: '请输入供应状态!'},],
openingBankNo: [{ required: false}, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!'},],
});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
export default defineComponent({ //
name: "ConfigSuppliersInfoForm", const disabled = computed(()=>{
components:{ if(props.formBpm === true){
BasicForm if(props.formData.disabled === false){
}, return false;
props:{ }else{
formData: propTypes.object.def({}), return true;
formBpm: propTypes.bool.def(true), }
}, }
setup(props){ return props.formDisabled;
const [registerForm, { setFieldsValue, setProps, getFieldsValue }] = useForm({ });
labelWidth: 150,
schemas: getBpmFormSchema(props.formData),
showActionButtonGroup: false,
baseColProps: {span: 24}
});
const formDisabled = computed(()=>{
if(props.formData.disabled === false){
return false;
}
return true;
});
let formData = {}; /**
const queryByIdUrl = '/invoicing/configSuppliersInfo/queryById'; * 新增
async function initFormData(){ */
let params = {id: props.formData.dataId}; function add() {
const data = await defHttp.get({url: queryByIdUrl, params}); edit({});
formData = {...data} }
//
await setFieldsValue(formData);
//
await setProps({disabled: formDisabled.value})
}
async function submitForm() { /**
let data = getFieldsValue(); * 编辑
let params = Object.assign({}, formData, data); */
console.log('表单数据', params) function edit(record) {
await saveOrUpdate(params, true) nextTick(() => {
} resetFields();
const tmpData = {};
initFormData(); Object.keys(formData).forEach((key) => {
if(record.hasOwnProperty(key)){
return { tmpData[key] = record[key]
registerForm,
formDisabled,
submitForm,
}
} }
})
//
Object.assign(formData, tmpData);
}); });
}
/**
* 提交数据
*/
async function submitForm() {
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);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await saveOrUpdate(model, isUpdate.value)
.then((res) => {
console.log("🚀 ~ submitForm ~ res:", res)
emit('ok');
})
.finally(() => {
confirmLoading.value = false;
});
}
defineExpose({
add,
edit,
submitForm,
});
</script> </script>
<style lang="less" scoped>
.antd-modal-form {
padding: 14px;
}
</style>

View File

@ -1,109 +1,84 @@
<template> <template>
<BasicDrawer
v-bind="$attrs" <a-drawer :title="title" :width="width" v-model:visible="visible" :closable="true"
@register="registerDrawer" :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }" @close="handleCancel">
:title="getTitle" <ConfigSuppliersInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigSuppliersInfoForm>
:width="adaptiveWidth" <template #footer>
@ok="handleSubmit" <a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
:showFooter="showFooter" <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
:showOkBtn="showFooter" </template>
destroyOnClose </a-drawer>
>
<div class="card-class">
<BasicForm @register="registerForm" />
</div>
</BasicDrawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, ref, computed, unref, useAttrs } from 'vue'; import { ref, nextTick, defineExpose } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index'; import ConfigSuppliersInfoForm from './ConfigSuppliersInfoForm.vue'
import { formSchema } from '../ConfigSuppliersInfo.data'; import JModal from '/@/components/Modal/src/JModal/JModal.vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { saveOrUpdate } from '../ConfigSuppliersInfo.api';
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
import { getTenantId } from "/@/utils/auth";
// Emits const title = ref<string>('');
const emit = defineEmits(['success', 'register']); const width = ref<string>('800');
const attrs = useAttrs(); const visible = ref<boolean>(false);
const isUpdate = ref(true); const disableSubmit = ref<boolean>(false);
const rowId = ref(''); const registerForm = ref();
const departOptions = ref([]); const emit = defineEmits(['register', 'success']);
let isFormDepartUser = false;
//
const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
labelWidth: 90,
schemas: formSchema,
showActionButtonGroup: false,
});
const showFooter = ref(true);
//
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
await resetFields();
showFooter.value = data?.showFooter ?? true;
setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) { /**
// * 新增
await setFieldsValue({ */
...data.record, function add() {
}); title.value = '新增';
} visible.value = true;
setProps({ disabled: !showFooter.value }); nextTick(() => {
registerForm.value.add();
}); });
// }
const getTitle = computed(() => {
// update-begin--author:liaozhiyang---date:20240306---forQQYUN-8389title
if (!unref(isUpdate)) {
return '新增';
} else {
return unref(showFooter) ? '编辑' : '详情';
}
// update-end--author:liaozhiyang---date:20240306---forQQYUN-8389title
});
const { adaptiveWidth } = useDrawerAdaptiveWidth();
// /**
async function handleSubmit() { * 编辑
try { * @param record
let values = await validate(); */
setDrawerProps({ confirmLoading: true }); function edit(record) {
values.userIdentity === 1 && (values.departIds = ''); title.value = disableSubmit.value ? '详情' : '编辑';
let isUpdateVal = unref(isUpdate); visible.value = true;
// -update-begin--author:liaozhiyang---date:20240702---forTV360X-1737updateFromPage:"deptUsers" nextTick(() => {
let params = values; registerForm.value.edit(record);
if (isFormDepartUser) { });
params = { ...params, updateFromPage: 'deptUsers' }; }
}
// -update-end--author:liaozhiyang---date:20240702---forTV360X-1737updateFromPage:"deptUsers" /**
// * 确定按钮点击事件
await saveOrUpdate(params, isUpdateVal); */
// function handleOk() {
closeDrawer(); registerForm.value.submitForm();
// }
emit('success',{isUpdateVal ,values});
} finally { /**
setDrawerProps({ confirmLoading: false }); * form保存回调事件
} */
} function submitCallback() {
console.log("🚀 ~ submitCallback ~ submitCallback:")
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
defineExpose({
add,
edit,
disableSubmit,
});
</script> </script>
<style lang="less" scoped> <style lang="less">
.antd-modal-form { /**隐藏样式-modal确定按钮 */
padding: 14px; .jee-hidden {
} display: none !important;
.card-class{
padding-top: 24px;
padding-bottom: 24px;
padding-left: 14px;
padding-right: 14px;
// background-color: rgba(255, 255, 255, 0.9);
background-color: #fcfdff;
border-radius: 10px;
// box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px;
margin-bottom: 14px;
} }
</style> </style>
<style lang="less" scoped></style>