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"
      :tab="props.tab"
      @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">
            <el-popconfirm title="确认要删除吗？" @confirm="deleteTableData(scoped.row)">
              <template #reference>
                <img
                  :src="del"
                  alt="delete"
                  class="actionIcon"
                  style="height: 30px; width: 30px; padding: 5px"
                />
              </template>
            </el-popconfirm>
            <img
              :src="edit"
              alt="edit"
              class="actionIcon"
              @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="type === '模板' ? '编辑模板' : '编辑标签'"
      :before-close="handleClose"
    >
      <DrawerCommonVue
        :detail="currentdrawerFormData"
        :type="props.type"
        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';
  import { LabelType } from './constant';

  // 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;
    tab: LabelType;
    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) => {
    done();
    closeDrawer();
  };

  // 编辑提交数据
  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>
  .actionIcon {
    display: inline-block;
    cursor: pointer;
  }
</style>