vue3增删查改demo版模板（未加接口）

vue3增删查改demo版模板（未加接口）

addModal模块
addModal.vue

<template>
  <a-modal
    :title="editOrAdd ? '新增应用' : '编辑应用'"
    v-model:visible="visible"
    @cancel="handleClose"
    @ok="handleConfirm"
    :getContainer="false"
    showFooter
    ><!--     height=1000px width=800px -->
    <a-form ref="formStateRef" :model="data" :rules="rules">
      <a-form-item label="应用ID" name="appId">
        <!-- required="true" -->
        <a-input size="small" v-model:value.trim="data.appId" :disabled="canEdit" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="应用名称" name="appName">
        <!-- required="true" -->
        <a-input size="small" v-model:value.trim="data.appName" :disabled="canEdit" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="英文名称" name="appNameEn">
        <!-- required="true" -->
        <a-input size="small" v-model:value.trim="data.appNameEn" :disabled="canEdit" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="状态" name="status">
        <a-select
          size="small"
          v-model:value="data.status"
          :statusOptions="statusOptions"
          :showArrow="true"
          :disabled="canEdit"
          placeholder="请选择"
        />
      </a-form-item>

      <a-form-item label="认证源">
        <a-select
          size="small"
          v-model:value="data.authencationSource"
          :hrcOptions="hrcOptions"
          :showArrow="true"
          :disabled="canEdit"
          placeholder="请选择"
        />
      </a-form-item>

      <a-form-item label="机构认证源">
        <a-select
          size="small"
          v-model:value="data.orgSourceType"
          :icsOptions="icsOptions"
          :showArrow="true"
          :disabled="canEdit"
          placeholder="请选择"
        />
      </a-form-item>

      <a-form-item label="应用描述">
        <a-textarea v-model:value="data.textValue" placeholder="" :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" src="./addModal.ts"></script>

<style lang="less" scoped>
:deep(.bond-info-modal) {
  width: 800px !important;
  .ant-modal-body {
    height: 500px;
    overflow: hidden;
  }
}

.card-item {
  width: 100%;
  padding: 10px 0;
  & > p {
    padding-left: 10px;
    border-left: 3px solid @primary-color;
  }
  :deep(.ant-form-item-label) {
    width: 110px;
    label {
      height: 100%;
    }
  }

  .upload-form {
    :deep(.ant-form-item-label) {
      width: auto;

      label {
        height: 100%;
      }
    }
  }
  .upload-wrap {
    display: flex;
    width: 60%;
    :deep(.ant-input) {
      margin-right: 10px;
    }
  }
}
</style>

addModal.ts

import { defineComponent, reactive, ref, toRefs } from 'vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import ModalEx from '@/components/ModalEx/ModalEx';
import { isArray } from 'xe-utils';
export default defineComponent({
  components: {
    UploadOutlined,
    ModalEx,
  },
  setup(props, { emit }) {
    const modalOperation = reactive({
      visible: false, //弹框显隐
      editOrAdd: true, //新增为true， 编辑为false
      canEdit: false, //判断是否可编辑
    });
    const formStateRef = ref(); //表单
    //渠道类型
    const selectValue = ref('');
    const statusOptions = ref([
      {
        value: '正常',
        label: '正常',
      },
      {
        value: '停用',
        label: '停用',
      },
    ]);

    const hrcOptions = ref([
      {
        value: '1111',
        label: '1111',
      },
      {
        value: '2222',
        label: '2222',
      },
    ]);

    const icsOptions = ref([
      {
        value: '222222',
        label: '222222',
      },
      {
        value: '111111',
        label: '111111',
      },
    ]);
    //表单初始数据
    const data = ref({
      appId: '',
      appName: '',
      appNameEn: '',
      status: '',
      creater: '',
      createdDate: '',
      textValue: '',
      authencationSource: '',
      orgSourceType: '',
      // channelName: '',
      // channelType: '',
      // channelSet: '',
      // address: '',
      // registeredAddress: '',
      // legalName: '',
      // agentName: '',
      // agentNumber: '',
      // phone: '',
      // zipCode: '',
      // mobile: '',
      // email: '',
      // fax: '',
      // account: '',
      // accountName: '',
      // openBank: '',
      // payNumber: '',
      // hostingName: '',
      // hostingNumber: '',
    });
    const dataInit = () => {
      data.value.appId = '';
      data.value.appName = '';
      data.value.appNameEn = '';
      data.value.status = '';
      data.value.creater = '';
      data.value.createdDate = '';
      data.value.textValue = '';
      data.value.authencationSource = '';
      data.value.orgSourceType = '';
      // data.value.channelName = '';
      // data.value.channelType = '';
      // data.value.channelSet = '';
      // data.value.address = '';
      // data.value.registeredAddress = '';
      // data.value.legalName = '';
      // data.value.agentName = '';
      // data.value.agentNumber = '';
      // data.value.phone = '';
      // data.value.zipCode = '';
      // data.value.mobile = '';
      // data.value.email = '';
      // data.value.fax = '';
      // data.value.account = '';
      // data.value.accountName = '';
      // data.value.openBank = '';
      // data.value.payNumber = '';
      // data.value.hostingName = '';
      // data.value.hostingNumber = '';
    };
    const showModal = (addOrEdit: string, formData: any, isEdit: boolean) => {
      // formStateRef.value.resetFields();
      console.log('编辑', formData);
      if (addOrEdit === 'edit' && isArray(formData)) {
        data.value = formData[0];
        modalOperation.canEdit = false;
      } else if (addOrEdit === 'edit' && isEdit === false) {
        data.value = formData;
        modalOperation.canEdit = true;
      } else if (addOrEdit === 'edit') {
        data.value = formData;
        modalOperation.canEdit = false;
      } else {
        modalOperation.canEdit = false;
        dataInit();
      }
      modalOperation.editOrAdd = addOrEdit === 'add' ? true : false;
      modalOperation.visible = true;
      console.log('表单重置方法', formStateRef.value);
    };
    //确认
    const handleConfirm = (e: any) => {
      formStateRef.value
        .validate()
        .then(() => {
          modalOperation.visible = false;
          console.log('data', data.value);
          emit('handleData', data.value, modalOperation.editOrAdd);
        })
        .catch((err: any) => {
          console.log(err);
        });
    };
    const handleClose = () => {
      emit('close');
    };
    const rules = reactive({
      channelName: [{ required: true, message: '渠道名称必填', trigger: 'blur', type: 'string' }],
    });
    return {
      handleClose,
      handleConfirm,
      showModal,
      ...toRefs(modalOperation),
      formStateRef,
      data,
      statusOptions,
      hrcOptions,
      icsOptions,
      selectValue,
      rules,
    };
  },
});

channelManage.vue

<template>
  <div class="channel-container">
    <!-- 头部 -->
    <div class="channel-header">
      <span class="channel-name">应用名称</span>
      <a-input-search
        placeholder="请输入内容"
        style="width: 200px"
        type="text"
        enter-button="查询"
        v-model:value="queryName"
        size="small"
        @search="onSearch"
      >
      </a-input-search>
      <a-button @click="addOrEditOperation('add')" style="margin-left: 10px" type="primary" size="small">新增</a-button>
      <a-button
        @click="addOrEditOperation('edit')"
        style="margin-left: 10px"
        type="primary"
        :disabled="buttonDisable"
        size="small"
        >编辑</a-button
      >
      <!-- 导入 -->
      <ImportComponent v-model:fileUrl="fileUrl">导入</ImportComponent>
    </div>
    <add-modal ref="addModal" @handleData="handleData"></add-modal>
    <!-- 表格 -->

    <v-grid ref="xGrid" :vGridOptions="gridOptions" :total="10" style="height: calc(100% - 44px)" @cell-click="cellClickEvent">
      <template #operations="{ row }">
        <span class="operate-button" @click="editRowEvent(row)">编辑</span>
        <span class="operate-button" @click="removeRowEvent(row)">删除</span>
      </template>
    </v-grid>
  </div>
</template>

<script lang="ts" src="./ChannelManage.ts"></script>

<style lang="less" scoped>
.channel-container {
  height: 800px;
  overflow: auto;
}
.channel-header {
  margin: 10px 10px;
  .channel-name {
    margin: 0 20px 0 20px;
  }
}
:deep(.ant-btn-sm) {
  height: 22px;
}
.operate-button {
  margin: 10px;
  color: #189fff;
  cursor: pointer;
}
:deep(.vxe-body--column.col_6) {
  color: #189fff;
  cursor: pointer;
}
</style>

channelManage.ts

import { defineComponent, ref, reactive, onMounted } from 'vue';
import { messageError, modalConfirmBoolean } from '@/utils/antdUtils';
import VGrid from '@/components/VGrid/VGrid';
import addModal from './addModal/addModal.vue';
import { appQuery } from '@/api/generate/other_api';
// import { RETURN_SUCCEED } from '@/types/Contant';
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table';
import { Button } from 'vxe-table';
import ImportComponent from '@/components/ImportComponent/ImportComponent';

export default defineComponent({
  components: {
    VGrid,
    addModal,
    Button,
    ImportComponent,
  },
  setup() {
    const addModal = ref();
    const buttonDisable = ref(true);
    const queryName = ref<string>('');
    const fileUrl = ref('');
    //表格数据
    const gridOptions = reactive<any>({
      id: 'TreeModule',
      border: true,
      showOverflow: true,
      loading: false,
      columns: [
        // { type: 'checkbox', width: 40 },
        { field: 'appId', title: '应用ID', width: 80 },
        { field: 'appName', title: '应用名称' },
        { field: 'appNameEn', title: '英文名称' },
        { field: 'authencationSource', title: '应用描述' },
        { field: 'status', title: '备注' },
        { field: 'creater', title: '操作人' },
        { field: 'createdDate', title: '操作时间' },
        { title: '操作', slots: { default: 'operations' }, width: 350, fixed: 'right' },
      ],
      data: <any>[],
    });

    //请求表格数据
    // 接口查询数据
    const formSearch = reactive({
      appId: '',
      appName: '',
      appNameEn: '',
      status: '',
      creater: '',
      createdDate: '',
    });
    const queryTableList = async (): Promise<void> => {
      try {
        const res: any = await appQuery(formSearch);
        console.log(res, 'ewewewrewwe'); //data,msg,code
        console.log(res.data, 'ew1ew1ew1'); //2条数据
        console.log(res.data.data, 'ew2ew2ew2'); //undefined
        gridOptions.data = res.data;
      } catch (error) {
        messageError(error);
      }
    };
    // const queryTableList = async (): Promise<void> => {
    //   try {
    //     const res: any = await appQuery(formSearch);
    //     console.log(res, 'ewewewrewwe'); //data,msg,code
    //     if (res.data.code === RETURN_SUCCEED) {
    //       gridOptions.data = res.data;
    //     }
    //   } catch (error) {
    //     messageError(error);
    //   }
    // };
    //新增或者是修改打开弹框
    const addOrEditOperation = (data: string) => {
      // const tableChecked = VGrid.value;
      // const records = tableChecked.getCheckboxRecords();
      // if (records.length !== 1) buttonDisable.value = false;
      if (data === 'add') {
        // tableChecked.clearCheckboxRow();
        buttonDisable.value = true;
        addModal.value.showModal(data);
      } else {
        addModal.value.showModal(data);
        // , records
      }
    };
    //新增一行或编辑修改数据
    const handleData = (data: any, editOrAdd: boolean) => {
      //新增
      if (editOrAdd) {
        gridOptions.data = [...gridOptions.data, data];
      } else {
        //编辑
        const index = gridOptions.data.findIndex((item: { id: any }) => item.id === data.id);
        gridOptions.data?.splice(index, 1, data);
      }
    };
    //勾选事件，禁用按钮
    // const selectChangeEvent: VxeTableEvents.CheckboxChange = () => {
    //   const $table = VGrid.value;
    //   const records = $table.getCheckboxRecords();
    //   if (records.length === 1) buttonDisable.value = false;
    //   else {
    //     buttonDisable.value = true;
    //   }
    // };
    // const selectAllChangeEvent: VxeTableEvents.CheckboxAll = () => {
    //   const $table = xGrid.value;
    //   const records = $table.getCheckboxRecords();
    //   buttonDisable.value = true;
    // };

    //编辑事件
    const editRowEvent = (row: any) => {
      addModal.value.showModal('edit', row);
    };
    //查询
    const onSearch = (value: string) => {
      if (value) {
        gridOptions.data = gridOptions.data?.filter((item: { appId: string | string[] }) => item.appId.includes(value));
      } else {
        queryTableList();
      }
    };
    //删除
    const removeRowEvent = async ({ id }: { id: number | string }) => {
      console.log(111);
      const isRemove = await modalConfirmBoolean('提示', '您确定要删除该数据?');
      // 确认删除
      if (isRemove) {
        const deleteIndex = gridOptions.data?.findIndex((item: { id: string | number }) => item.id === id); // 可选链操作符 xxxx?.xxxxx
        if (deleteIndex !== -1) {
          gridOptions.data.splice(deleteIndex, 1);
          gridOptions.data = [...gridOptions.data];
        }
      }

      // const type = await VXETable.modal.confirm('您确定要删除该数据?');
      // const $grid = xGrid.value;
      // console.log('删除数据', $grid, row);
      // const deleteIndex = gridOptions.data?.findIndex((item) => item.id === row.id);
      // if ($grid) {
      //   if (type === 'confirm') {
      //     gridOptions.data.splice(deleteIndex, 1);
      //     gridOptions.data = [...gridOptions.data];
      //   }
      // }
    };
    //点击渠道名称查看信息弹框
    const cellClickEvent: VxeTableEvents.CellClick = ({ row, column }) => {
      if (column.property === 'appId') {
        addModal.value.showModal('edit', row, false);
      }
    };
    onMounted(() => {
      queryTableList();
    });
    return {
      fileUrl,
      VGrid,
      gridOptions,
      editRowEvent,
      removeRowEvent,
      addModal,
      buttonDisable,
      addOrEditOperation,
      // selectChangeEvent,
      handleData,
      onSearch,
      queryName,
      cellClickEvent,
    };
  },
});