sl-sfy-safety/src/views/system-config/template/CardCommon.vue

<template>
  <div>
    <TitleCommon
      v-model="cardaddDrawer"
      :type="props.type"
      :pagesize="currentPageSize"
      :pagenumber="currentPage"
      :drawer="cardaddDrawer"
      @find-data-by-name="searchDataByName"
      @submit-drawer="addData"
      @add-form="clickAddData"
      @handle-close="closeDrawer"
      @clear-data="clearData"
    >
    </TitleCommon>

    <div style="margin-top: 20px">
      <el-table style="width: 100%" :data="tableData" highlight-current-row>
        <el-table-column :label="props.type + `名称`" prop="name" />
        <el-table-column :label="props.type + `代码`" prop="code" />

        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="备注" prop="remark" />
        <el-table-column label="创建时间" prop="createdAt" />
        <el-table-column label="操作">
          <template #default="scoped">
            <img
              :src="del"
              alt=""
              @click="deleteTableData(scoped.row)"
              style="height: 30px; width: 30px; padding: 5px"
            />
            <img
              :src="edit"
              alt=""
              @click="showEditDrawer(scoped.row)"
              style="height: 30px; width: 30px; padding: 5px"
            />
          </template>
        </el-table-column>
      </el-table>

      <div>
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:currentPageSize="currentPageSize"
          :page-sizes="[10, 20, 50, 100, 200]"
          layout="->,total,sizes,prev,pager,next,jumper"
          :total="total"
          @size-change="handleSizeChangeFun"
          @current-change="handlePageChangeFun"
        />
      </div>
    </div>

    <el-drawer
      v-model="cardeditDrawer"
      direction="rtl"
      :title="currentType"
      :before-close="handleClose"
    >
      <DrawerCommonVue
        :detail="currentdrawerFormData"
        v-if="currentdrawerFormData"
        @submit-drawer="submitDrawer"
      />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { ElDrawer, ElMessageBox } from 'element-plus';
  import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
  import TitleCommon, { DataCommon } from './TitleCommon.vue';
  import { Records, SceneModule } from '@/api/template/template';
  import del from '@/assets/icons/del.png';
  import edit from '@/assets/icons/edit.png';

  // const currentFormType = ref('场景');

  export type CreateType = '添加模板' | '修改模板';
  export interface TableModel {
    id: number;
    name: string;
    code: string;
    status: number;
    remark: string;
    createAt: string;
  }

  export interface ModelCommon {
    drawerFormData: FormModelCommon | null;
  }

  export interface Page {
    page: number;
    size: number;
  }

  const currentType = ref<CreateType>('添加模板');
  const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
  const cardeditDrawer = ref(false);
  const cardaddDrawer = ref(false);
  const currentPage = ref(1);
  const currentPageSize = ref(10);
  const total = ref(100);
  const tableData = ref<Records[]>([]);

  const props = defineProps<{
    type: string;
    addData: (d: SceneModule) => Promise<unknown>;
    searchDataByName: (d: DataCommon) => Promise<unknown>;
    deleteTableData: (d: TableModel) => Promise<unknown>;
    submitDrawer: (d: SceneModule) => Promise<unknown>;
    getData: (d: Page) => Promise<unknown>;
  }>();

  // 删除数据-finish
  function deleteTableData(row: TableModel) {
    // emit('deleteTableData', row);
    props.deleteTableData(row).then((res) => {
      console.log('deleteTableData', res);
      getData({ page: currentPage.value, size: currentPageSize.value });
    });
  }

  // 编辑数据弹框-finish
  function showEditDrawer(row: TableModel) {
    cardeditDrawer.value = true;
    console.log('row', row);
    currentdrawerFormData.value = row;
  }

  // 弹框关闭事件-finish
  const handleClose = (done: () => void) => {
    ElMessageBox.confirm('是否确认关闭?')
      .then(() => {
        done();
        closeDrawer();
      })
      .catch(() => {
        // catch error
      });
  };

  // 编辑提交数据
  function submitDrawer(data: SceneModule) {
    console.log('编辑提交数据：', data);
    props.submitDrawer(data).then((res) => {
      console.log('submitDrawer', res);
      closeDrawer();
      getData({ page: currentPage.value, size: currentPageSize.value });
    });
  }

  // 查询数据列表-finish
  function getData(data: Page) {
    props.getData(data).then((res) => {
      console.log('getData', res);
      tableData.value = res.records;
      total.value = res.totalRow;
    });
  }

  // 根据名称找到数据-finish
  function searchDataByName(data: DataCommon) {
    props.searchDataByName(data).then((res) => {
      console.log('searchDataByName', res);
      tableData.value = res.records;
    });
  }

  // 单机添加按钮，控制弹框显示-finish
  function clickAddData() {
    cardaddDrawer.value = true;
  }

  // 添加数据-finish
  function addData(data: SceneModule) {
    props.addData(data).then((res) => {
      console.log('addData', res);
      closeDrawer();

      getData({ page: currentPage.value, size: currentPageSize.value });
    });
  }

  function closeDrawer() {
    cardaddDrawer.value = false;
    cardeditDrawer.value = false;
    getData({ page: currentPage.value, size: currentPageSize.value });
  }

  // 清空输入框数据-finish
  function clearData() {
    // getSceneLabelList(currentPage.value, currentPageSize.value);
    getData({ page: currentPage.value, size: currentPageSize.value });
  }

  // 页数-finish
  function handleSizeChangeFun(val: number) {
    currentPageSize.value = val;
    getData({ page: currentPage.value, size: currentPageSize.value });
  }

  // 翻页-finish
  function handlePageChangeFun(val: number) {
    currentPage.value = val;
    console.log('currentPage:' + currentPage.value);
    getData({ page: currentPage.value, size: currentPageSize.value });
  }

  onMounted(() => {
    // getData(props.currentPage, props.currentPageSize);
    getData({ page: currentPage.value, size: currentPageSize.value });
  });
</script>

<style scoped></style>