dataControl/src/views/Model.vue

<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="top-div">
        <el-button type="primary" size="large" @click="addData">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" border stripe
        :header-cell-style="{ background: '#F6F7FC' }" size="large">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="template_name" label="模板名称" width="240" align="center" show-overflow-tooltip />
        <el-table-column prop="template_type" label="模板类型" width="240" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ templateData[scope.row.template_type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="template_description" label="模板描述"  align="center" show-overflow-tooltip />
        <el-table-column label="模板管理" align="center" show-overflow-tooltip width="300">
          <template #default="scope">
            <el-button type="primary" size="large" @click="viewData(scope.row)">
              点位
            </el-button>
            <el-button  size="large" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="large" @click="delData(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
        style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[10, 30, 50]"
         :page-size="listQuery.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
      >
      </el-pagination>
      </div>
    </div>
    <AddMb :type="type" :formData="formData" :templateData="templateData" :dialogVisible="dialogVisible"
      v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
    </AddMb>
    <ViewPoint :formData="formData1" :templateData="templateData" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess">
    </ViewPoint>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddMb from "@/components/AddMb.vue";
import infoApi from "@/api/infoApi.js";

import ViewPoint from "@/components/ViewPoint.vue"
export default {
  name: "model",
  components: {
    AddMb,
    ViewPoint
  },
  setup() {
    const state = reactive({
      dialogVisible: false,
      dialogVisible2: false,
      // tableData: [],
      tableData1:[],
      formData: {
        template_name: '',
        template_description: '',
        template_type: '1'
      },
      formData1: {},
      type: 'I',
      templateData: {},
      listQuery: {
        page: 1,
        pageNum: 10
      }
    });

    const tableData = computed(() => {
      // 分页的起始下标
      const startIndex = (state.listQuery.page - 1) * state.listQuery.pageNum;
      // 分页的末尾下标
      const endIndex = startIndex + state.listQuery.pageNum;
      // 返回切割后的数据
      return state.tableData1 && state.tableData1.length > 0 && state.tableData1.slice(startIndex, endIndex);
    });

    const totalNum = computed(() => {
      return state.tableData1 && state.tableData1.length;
    })

    const total = computed(() => {
      return state.tableData1 && Math.ceil(state.tableData1.length / state.listQuery.pageNum);
    })

    onMounted(() => {
      getTemplateType();
      getTableData();
    });


    const getTemplateType = async () => {
      const res = await infoApi.getTemplateType();
      if (res.code == 0) {
        // 获取数据
        state.templateData = res.data;
      } else {
      }
    }
    const getTableData = async () => {
      const res = await infoApi.getMb();
      if (res.code == 0) {
        // 获取数据
        state.tableData1 = res.data && res.data.length > 0 && res.data.sort((a,b) => {
          return (a.name > b.name ? 1 : -1) || []
        });
      } else {
      }
    };
    const editData = (item) => {
      state.dialogVisible = true;
      state.type = 'U';
      state.formData = JSON.parse(JSON.stringify(item));
    };

    const delData = (item) => {
      ElMessageBox.confirm("确定删除该数据?", "删除模板", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await infoApi.delMb(item);
          if (res.code == 0) {
            ElMessage.success(res.data || res.message || "请求成功");
            getTableData();
          } else {
            ElMessage.error(res.data || res.message || "请求失败");
          }
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    };

    const addData = () => {
      state.dialogVisible = true;
      //清空数据
      state.formData = {
        template_name: '',
        template_description: '',
        template_type: 1
      }
      state.type = 'I';
    };

    const viewData = (item) => {
      state.dialogVisible2 = true;
      state.formData1 = item;
    }
    const dialogClose = () => {
      state.dialogVisible = false;
      state.dialogVisible2 = false;
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      state.dialogVisible2 = false;
      getTableData();
    };

    const handleSizeChange =(val) => {
      state.listQuery.pageNum = val;
    }

    const handleCurrentChange = (val) => {
      state.listQuery.page = val;
    }
    return {
      ...toRefs(state),
      editData,
      delData,
      getTableData,
      addData,
      dialogSuccess,
      dialogClose,
      viewData,
      tableData,
      totalNum,
      total,
      handleSizeChange,
      handleCurrentChange
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
}

.top-div {
  display: flex;
  justify-content: flex-end;
}
</style>