dataControl/src/views/Rules.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="730"
        style="width: 100%"
        border
        stripe
        :header-cell-style="{ background: '#F6F7FC' }"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column
          prop="title"
          label="标题"
          width="200"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="description"
          label="描述"
          width="200"
          align="center"
          show-overflow-tooltip
        /> 
        <el-table-column label="规则管理" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-button type="primary" @click="editData(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="delData(scope.row)">
              删除
            </el-button>
            <el-switch
              v-model="scope.row.enable"
              inline-prompt
              active-text="启用"
              inactive-text="停用"
              :active-value="false"
              :inactive-value="true"
              active-color="#13ce66"
              inactive-color="red"
              @change="changeStatus(scope.row)"
            />
            <el-button type="danger" @click="setData(scope.row)">
              设计
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div> 
    <AddRule
      :type="type"
      :formData="formData"
      :dialogVisible="dialogVisible"
      v-if="dialogVisible"
      @dialogClose="dialogClose"
      @dialogSuccess="dialogSuccess"
    >
    </AddRule>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue"; 
import { ElMessage, ElMessageBox } from "element-plus"; 
import infoApi from "@/api/infoApi.js";
import { response, rule,rule_info,post } from '../proto/data/pd'
import AddRule from "@/components/AddRule.vue";
export default {
  name: "rules",
  components: {
    AddRule
  },
  setup() {
    const state = reactive({
      tableData: [],
      formData: {
        title: '',
        description: ''
      },
      dialogVisible: false,
      type: 'I'
    });

    onMounted(() => {
      getTableData();
    });
    // 获取列表
    const getTableData = async () => {
      const res = await infoApi.getRules();
      const ret = response.decode(new Uint8Array(res));
      
      if (ret.code == 0) {
          // 获取数据
          // state.tableData = rule.decode(ret.data);
          console.log(rule.decode(ret.data));
          /**
           * 组长看这里
           * 
           */
           // lable 是标题
           // info 是描述
      } else {
          console.log(res);
      }
    };
    // 编辑
    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 req_databuf = rule_info.encode({
            id: item.id,
          }).finish();
          // 截取有效长度
          const req_data = req_databuf.slice(0, req_databuf.length);
          const req_databuf1 = post.encode({
              cmd: 2,
              data: req_data,
          }).finish();
          // 截取有效长度
          const req_data1 = req_databuf1.slice(0, req_databuf1.length);
 
          const res = await infoApi.postJsonRequest(req_data1);
          const ret = response.decode(new Uint8Array(res));
          if (ret.code == 0) {
            ElMessage.success(res.msg || "请求成功");
            getTableData();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          ElMessage.info("已取消删除");
        });
    };
    // 新增
    const addData = () => {
      //清空数据
      state.formData = {
        title: '',
        description: ''
      }
      state.type = 'I';
      state.dialogVisible = true;
    };
    // 启用停用
    const changeStatus = async (item) => {
      const req_databuf = rule_info.encode({
          id: item.id,
      }).finish();
      // 截取有效长度
      const req_data = req_databuf.slice(0, req_databuf.length);

      const req_databuf1 = post.encode({
        cmd: 3,
        data: req_data,
    }).finish();
    // 截取有效长度
    const req_data1 = req_databuf1.slice(0, req_databuf1.length);

    const req_databuf2 = post.encode({
        cmd: 3,
        data: req_data,
    }).finish();
    // 截取有效长度
    const req_data2 = req_databuf2.slice(0, req_databuf2.length);


      const res =  item.enable==='启动' ? await infoApi.postJsonRequest(req_data2) : await infoApi.postJsonRequest(req_data1);
      const ret = response.decode(new Uint8Array(res));
      if (ret.code == 0) {
        ElMessage.success(res.msg || "更新成功");
        getTableData();
      } else {
        ElMessage.error(res.msg);
      }
    };
    const dialogClose = () => {
      state.dialogVisible = false;
    };

    const dialogSuccess = () => {
      state.dialogVisible = false;
      getTableData();
    };
    return {
      ...toRefs(state),
      editData,
      delData,
      getTableData,
      addData,
      dialogSuccess,
      dialogClose
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
} 
.top-div {
  display: flex;
  justify-content: flex-end;
}
</style>