dataControl/src/views/Model.vue

<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="top-div">
        <el-button type="primary" @click="addData">新增</el-button>
      </div>
      <el-table :data="tableData" height="760" style="width: 100%" border stripe
        :header-cell-style="{ background: '#F6F7FC' }">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="name" label="模板名称" width="240" align="center" show-overflow-tooltip />
        <el-table-column prop="type" label="模板类型" width="240" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ templateData[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="point_count" label="点位数量" width="240" align="center" show-overflow-tooltip />
        <el-table-column prop="description" label="模板描述" width="600" align="center" show-overflow-tooltip />
        <el-table-column label="模板管理" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="primary" @click="viewData(scope.row)">
              点位
            </el-button>
            <el-button type="primary" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="delData(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </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 } 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: [],
      formData: {
        name: '',
        description: '',
        type: '1'
      },
      formData1: {},
      type: 'I',
      templateData: {}
    });

    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.tableData = 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.message || "请求成功");
            getTableData();
          } else {
            ElMessage.error(res.message);
          }
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    };

    const addData = () => {
      state.dialogVisible = true;
      //清空数据
      state.formData = {
        name: '',
        description: '',
        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();
    };
    return {
      ...toRefs(state),
      editData,
      delData,
      getTableData,
      addData,
      dialogSuccess,
      dialogClose,
      viewData
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
}

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