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>