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

<template>
  <div class="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">
          <a-button
            type="primary"
            size="small"
            @click="operateForm('read', record)"
            style="margin-left: 10px"
            >查看</a-button
          >
          <a-button
            type="primary"
            size="small"
            @click="operateForm('edit', record)"
            class="btn-edit"
            style="margin-left: 10px"
            >修改</a-button
          >
          <a-button
            type="primary"
            size="small"
            @click="operateForm('del', record)"
            class="btn-del"
            style="margin-left: 10px"
            >删除</a-button
          >
        </template>
      </ComTable>
    </div>
  </div>
  <div>
    <a-modal v-model:open="formModal"  width="70%" style="top: 20px" :footer="null">
      <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'
export default {
  name: '',
  components: { policyForm },
  props: {},
  data() {
    return {
      formModal: false,
      btnOptionList: [
        { label: '新增', icon: 'icon-tianjia', type: 'add' },
        { label: '删除', icon: 'icon-tianjia', type: 'del' }
      ],
      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: {},
      pageOption: {
        page: 0,
        pageSize: 10,
        total: 0
      },
      tableH: '',
      formState: {},
      formStatus:'add',//表单状态辑状态 add:新增 edit:编辑
    }
  },
  mounted() {
    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.total = 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 = {}) {
      
      this.formStatus = type
      switch (type) {
      case 'add':
        this.formModal = true
        this.formState = {}
        break
      case 'read':
        this.formModal = true
        this.formState = record
        break

      default:
        break
      }
    },
    closeModal(){
      this.formModal = false
    },
    handlePagesizeChange(data) {
      console.log(data)
    }
  }
}
</script>

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