|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
|
|
|
+ <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
|
|
|
+ <a-button style="margin-left:5px" type="primary" @click="handleEdit"> 编辑</a-button>
|
|
|
+ <a-button style="margin-left:5px" type="primary" @click="handleDel"> 删除</a-button>
|
|
|
+ <a-button style="margin-left:5px" type="primary" @click="handleGet" > 刷新</a-button>
|
|
|
+
|
|
|
+ <JVxeTable
|
|
|
+ ref="tableRef"
|
|
|
+ keep-source
|
|
|
+ resizable
|
|
|
+ :loading="demoFieldDefValSubTable.loading"
|
|
|
+ :columns="demoFieldDefValSubTable.columns"
|
|
|
+ :dataSource="demoFieldDefValSubTable.dataSource"
|
|
|
+ :height="340"
|
|
|
+ :rowNumber="false"
|
|
|
+ :rowSelection="true"
|
|
|
+ :toolbar="false"
|
|
|
+
|
|
|
+ />
|
|
|
+
|
|
|
+ </BasicModal>
|
|
|
+
|
|
|
+ <BaseShipArchiveAccessoriesModal2 @register="accessoriesAdd2" @success="handleSuccess"></BaseShipArchiveAccessoriesModal2>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import {ref, computed, unref,reactive} from 'vue';
|
|
|
+ import {BasicModal, useModalInner} from '/@/components/Modal';
|
|
|
+ import {BasicForm, useForm} from '/@/components/Form/index';
|
|
|
+ import {formSchema,columns} from '../BaseShipArchiveAccessories.data';
|
|
|
+ import {saveOrUpdate,list,deleteOne} from '../BaseShipArchiveAccessories.api';
|
|
|
+ import BaseShipArchiveAccessoriesModal2 from './BaseShipArchiveAccessoriesModal2.vue'
|
|
|
+ import {useModal} from '/@/components/Modal';
|
|
|
+ import { JVxeTable } from '/@/components/jeecg/JVxeTable'
|
|
|
+ import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+
|
|
|
+ const { createMessage, createConfirm, createSuccessModal, createInfoModal, createErrorModal, createWarningModal, notification } = useMessage();
|
|
|
+
|
|
|
+ const tableRef = ref<JVxeTableInstance>()
|
|
|
+ const [accessoriesAdd2,{openModal: openModal2}] = useModal();
|
|
|
+
|
|
|
+ const demoFieldDefValSubTable = reactive({
|
|
|
+ loading: false,
|
|
|
+ dataSource: [],
|
|
|
+ columns:columns
|
|
|
+ })
|
|
|
+ // Emits声明
|
|
|
+ const emit = defineEmits(['register','success']);
|
|
|
+ var isShow = "";
|
|
|
+ const isUpdate = ref(true);
|
|
|
+ const isDetail = ref(false);
|
|
|
+ //表单配置
|
|
|
+ const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField }] = useForm({
|
|
|
+ labelWidth: 150,
|
|
|
+ schemas: formSchema,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ baseColProps: {span: 24}
|
|
|
+ });
|
|
|
+ async function handleSave(record: EditRecordRow) {
|
|
|
+ console.log("=========================");
|
|
|
+ }
|
|
|
+
|
|
|
+ let headId = "";
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 新增事件
|
|
|
+ */
|
|
|
+
|
|
|
+ function handleAdd(record: Recordable) {
|
|
|
+ record.headId=headId;
|
|
|
+ openModal2(true, {
|
|
|
+ record,
|
|
|
+ isUpdate: false,
|
|
|
+ showFooter: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleEdit(record: Recordable) {
|
|
|
+ const values = tableRef.value.getSelectionData()
|
|
|
+
|
|
|
+ if (values.length != 1) {
|
|
|
+ createMessage.warn('请选择一条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ record = values[0];
|
|
|
+ openModal2(true, {
|
|
|
+ record,
|
|
|
+ isUpdate: true,
|
|
|
+ showFooter: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function handleDel(record: Recordable) {
|
|
|
+ const values = tableRef.value.getSelectionData()
|
|
|
+
|
|
|
+ if (values.length != 1) {
|
|
|
+ createMessage.warn('请选择一条数据');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ createConfirm({
|
|
|
+ title: '提示',
|
|
|
+ content: `确定要删除吗?`,
|
|
|
+ iconType: 'warning',
|
|
|
+ okText:'确定',
|
|
|
+ onOk: () => new Promise((resolve,rejected)=>{
|
|
|
+ record = values[0];
|
|
|
+ deleteOne({id: record.id}, handleGet);
|
|
|
+ resolve();
|
|
|
+
|
|
|
+ }),
|
|
|
+ onCancel: () => {console.log('取消了')}
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //表单赋值
|
|
|
+ const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
|
|
|
+ //重置表单
|
|
|
+ // await resetFields();
|
|
|
+ // setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
|
|
|
+ // isUpdate.value = !!data?.isUpdate;
|
|
|
+ // isDetail.value = !!data?.showFooter;
|
|
|
+ // if (unref(isUpdate)) {
|
|
|
+ // //表单赋值
|
|
|
+ // await setFieldsValue({
|
|
|
+ // ...data.record,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // isShow = true;
|
|
|
+ headId = data.record.headId
|
|
|
+ await list({headId:data.record.headId}).then(function (response) {
|
|
|
+
|
|
|
+ // response.records.forEach(item => {
|
|
|
+ // console.log(item);
|
|
|
+ // });
|
|
|
+
|
|
|
+ // console.log(response.records);
|
|
|
+ demoFieldDefValSubTable.dataSource = response.records;
|
|
|
+
|
|
|
+ }).catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 隐藏底部时禁用整个表单
|
|
|
+ // setProps({ disabled: !data?.showFooter })
|
|
|
+ });
|
|
|
+ async function handleGet(){
|
|
|
+ await list({headId:headId}).then(function (response) {
|
|
|
+
|
|
|
+ demoFieldDefValSubTable.dataSource = response.records;
|
|
|
+
|
|
|
+ }).catch(function (error) {
|
|
|
+ console.log(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //设置标题
|
|
|
+ const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '配件明细(accessories details)' : '编辑'));
|
|
|
+ //表单提交事件
|
|
|
+ async function handleSubmit(v) {
|
|
|
+ try {
|
|
|
+ let values = await validate();
|
|
|
+ setModalProps({confirmLoading: true});
|
|
|
+ //提交表单
|
|
|
+ await saveOrUpdate(values, isUpdate.value);
|
|
|
+ //关闭弹窗
|
|
|
+ closeModal();
|
|
|
+ //刷新列表
|
|
|
+ emit('success');
|
|
|
+ } catch ({ errorFields }) {
|
|
|
+ if (errorFields) {
|
|
|
+ const firstField = errorFields[0];
|
|
|
+ if (firstField) {
|
|
|
+ scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return Promise.reject(errorFields);
|
|
|
+ } finally {
|
|
|
+ setModalProps({confirmLoading: false});
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ /** 时间和数字输入框样式 */
|
|
|
+ :deep(.ant-input-number) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ant-calendar-picker) {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+</style>
|