energy_storage/web/src/views/system/policy.vue

<template>
  <div class="policy" ref="policy">
    <searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
    <div class="content-table">
      <ComTable
        :columns="columns"
        :table-data="tableData"
        @handlePagesizeChange="handlePagesizeChange"
        ref="comTable"
        :table-option="tableOption"
        :page-option="pageOption"
        :table-h="tableH"
      >
        <template #type="record">
          <div>{{ getPolicyType(record.type) }}</div>
        </template>
        <template #isOpen="record">
          <a-tag :color="record.is_open == 1 ? '#2db7f5' : '#f50'">{{
            record.is_open == 1 ? '启用' : '禁用'
          }}</a-tag>
        </template>
        <template #action="record">
            <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </ComTable>
    </div>
  </div>
  <div>
    <a-modal
      v-model:open="formModal"
      width="70%"
      style="top: 20px"
      :footer="null"
      :get-container="() => $refs.policy"
    >
      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
    </a-modal>
  </div>
</template>

<script>
import policyForm from '@/components/system/policyForm.vue'
import { getReq } from '@/request/api'
import { policyTypes } from '@/utils/config'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
export default {
  name: '',
  components: { policyForm },
  props: {},
  data() {
    return {
      formModal: false,
      btnOptionList: [
      ],
      columns: [
        {
          title: '策略ID',
          dataIndex: 'policy_id',
          key: 'policyId',
          width: 120,
          ellipsis: true
        },
        {
          title: '策略名称',
          dataIndex: 'name',
          key: 'name',
          width: 120,
          ellipsis: true
        },
        {
          title: '策略类型',
          dataIndex: 'type', //策略类型：1：削峰套利；2：需求响应；3：自发自用
          key: 'type',
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '策略描述',
          dataIndex: 'describe',
          key: 'describe',
          width: 120,
          ellipsis: true
        },
        {
          title: '策略参数',
          dataIndex: 'value',
          key: 'value',
          width: 200,
          ellipsis: true
        },
        {
          title: '是否启用',
          dataIndex: 'is_open',
          key: 'isOpen',
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: 'isOpen' }
        },

        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'action' }
        }
      ],
      tableData: [],
      tableOption: {
        select:false
      },
      pageOption: {
        page: 1,
        pageSize: 10,
        count: 0
      },
      tableH: '',
      formState: {},
      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
      operateList:[]
    }
  },
  mounted() {
    this.operateList = this.$getBtns(['查看', '修改', '删除'])
    this.btnOptionList = this.$getBtns(['新增'])
    this.getTableList()
  },
  methods: {
    async getTableList() {
      try {
        const res = await getReq('/queryPolicyList', {
          page: this.pageOption.page,
          page_size: this.pageOption.pageSize
        })
        console.log(res)
        this.tableData = res.data
        this.pageOption.count = res.count
      } catch (error) {
        console.log(error)
      }
    },
    getPolicyType(type) {
      return policyTypes.find((item) => item.value == type)?.label || ''
    },

    onSearch(data) {
      console.log(data)
    },
    operateForm(type, record = {}) {
      console.log(type, record)

      this.formStatus = type
      switch (type) {
      case 'add':
        this.formModal = true
        this.formState = {}
        break
      case 'read':
        this.formModal = true
        this.formState = record
        break
      case 'del':
        this.handleDelete(record.policy_id)
        break
      case 'edit':
        this.formModal = true
        this.formState = record
        break
      default:
        break
      }
    },
    // async handleDelete(record) {
    //   try {
    //     const res = await getReq('/deletePolicy', {
    //       policy_id: record['policy_id']
    //     })
    //     if (res.errcode == 0) {
    //       this.$message.success('删除成功')
    //       this.getTableList()
    //     }
    //   } catch (error) {
    //     this.$message.success(error)
    //   }
    // },
    //  删除操作
    async handleDelete(id) {
      const that = this
      this.$Modal.confirm({
        title: '你确认删除数据吗?',
        icon: createVNode(ExclamationCircleOutlined),

        async onOk() {
          try {
            const res = await getReq('/deletePolicy', {
              policy_id: id
            })
            if (res.errcode == 0) {
              that.$message.success('删除成功')
              that.getTableList()
            }
          } catch (error) {
            that.$message.success(error)
          }
        },
        onCancel() {
          // console.log("Cancel");
        },
        class: 'test'
      })
    },
    closeModal(flag = false) {
      this.formModal = false
      if (flag) {
        this.pageOption.page = 1
        this.getTableList()
      }
    },
    handlePagesizeChange(data) {
      if (data.pageSize !== this.pageOption.pageSize) {
        this.pageOption.page = 1
      } else {
        this.pageOption.page = data.page
      }
      this.pageOption.pageSize = data.pageSize
      this.getTableList()
    }
  }
}
</script>

<style lang="scss" scoped>
.policy {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  .content-table {
    width: 100%;
    height: calc(100% - 90px);
  }
}
</style>