energy_storage/web/src/components/EditCom.vue

<template>
  <div class="editCom">
    <template v-for="(detailInfo, index) in detailInfos" :key="index">
      <DetailInfo
        :items="detailInfo"
        :rule-form="detailInfo.ruleForm"
        :form-rules="formRules"
        :ref="'detailInfo' + index"
        :disabled="disabled"
      >
        <template #role_id="item">
          <a-select
            :dropdown-match-select-width="false"
            v-model:value="detailInfo.ruleForm[item.key]"
            :placeholder="'请选择' + item.label"
            :disabled="disabled"
            allow-clear
          >
            <a-select-option
              :value="selectItem.role_id"
              v-for="selectItem in roleIdList"
              :key="selectItem.role_id"
            >
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </template>
        <template #treetable="item">
          <TreeTable
            :columns="item.columns"
            :table-data="item.tableData"
            ref="treeTable"
            :transfer-dialog="transferDialog"
            @handleDetailPagesizeChange="handleDetailPagesizeChange"
            :table-option="{
              checkStrictly: false,
              selectTableData: item.selectTableData,
              scroll: { y: 500 }
            }"
          >
            <template #isQuery="record">
              <a-tag :color="record.isQuery ? 'green' : 'red'">{{
                record.isQuery ? '启用' : '禁用'
              }}</a-tag>
            </template>
            <template #isEdit="record">
              <a-tag :color="record.isEdit ? 'green' : 'red'">{{
                record.isEdit ? '启用' : '禁用'
              }}</a-tag>
            </template>
            <template #isControl="record">
              <a-tag :color="record.isControl ? 'green' : 'red'">{{
                record.isControl ? '启用' : '禁用'
              }}</a-tag>
            </template>
          </TreeTable>
        </template>
      </DetailInfo>
    </template>

    <div style="display: flex; justify-content: center; gap: 20px">
      <a-button @click="handleback">取消</a-button>
      <a-button @click="handleConfirm" type="primary" :disabled="disabled">确认</a-button>
    </div>
  </div>
</template>

<script>
import { userOptions, userFormRules,
  roleOptions,roleFormRules,
  stationOptions,stationFormRules

} from '../../public/config/columnList'
import DetailInfo from './DetailInfo.vue'
import { postReq, getReq } from '@/request/api'
const dictionary = {
  menu: '菜单',
  file: '文件',
  role: '角色',
  permission: '权限',
  account: '账户',
  log: '日志',
  server: '服务',
  computer: '主机'
}
export default {
  name: '',
  components: { DetailInfo },
  props: {
    action: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    record: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      tip: '正在加载...',
      roleIdList: [],
      transferDialog: false,
      detailInfos: [],
      disabled: true,
      formRules: {},
      apiMethods: {
        // menu: 'menuConfirm',
        // permission: 'permissionConfirm',
        user: 'userConfirm',
        role: 'roleConfirm',
      },
      form: {},
      ObjInfo: {},
      loading: false
    }
  },
  computed: {},
  watch: {
    action: {
      handler(n) {
        if (n === 'read') {
          this.disabled = true
        } else {
          this.disabled = false
        }
      },
      immediate: true
    },

    type: {
      async handler(n) {
        switch (n) {
        case 'user':
          this.detailInfos = userOptions
          this.formRules = userFormRules
          break
        case 'menu':
          //   this.detailInfos = menuOptions
          //   this.formRules = menuFormRules
          break
        case 'permission':
          //   this.detailInfos = permissionOptions
          //   this.formRules = permissionFormRules
          break

        case 'role':
          this.detailInfos = roleOptions
          this.formRules = roleFormRules
          break

        case 'station':
          this.detailInfos = stationOptions
          this.formRules = stationFormRules

          break

        default:
          break
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getRoleIdList()
  },
  methods: {
    async getRoleIdList() {
      const params = {
        page_size: 1000,
        page: 1
      }
      try {
        const res = await getReq('/queryRoleList', params)
        if (res.errcode === 0) {
          this.roleIdList = res.data
        } else {
          const err = { tip: res.errmsg }
          throw err
        }
      } catch (error) {
        this.roleIdList = []
        //统一处理报错提示
      }
    },
    handleChange(value) {
      this.ip = ''
      this.selectComputer = value.option
      this.selectComputer.id = value.option.value
      this.ipList = this.getIpOptions(this.selectComputer.id)
    },

    handleDetailPagesizeChange(val) {
      this.detailInfos[val[1]].list[0].detailPaginationOption = {
        ...this.detailInfos[val[1]].list[0].detailPaginationOption,
        ...val[0]
      }

      if (this.detailInfos[val[1]].list[0].key === 'servebiaoge') {
        //  应用信息中消息模板需要通过接口调用数据
        let arr = {
          ids: this.clickId,
          pageIndex: val[0].current,
          pageSize: val[0].pageSize
        }
      }
    },

    handleRemove(file) {
      const index = this.fileList.indexOf(file)

      this.fileList.splice(index, 1)
    },

    beforeUpload(file, fileList) {
      this.fileList = [...this.fileList, file]

      return false
    },

    //  调用子组件的表单的方法
    async handleConfirm() {
      const result = []
      const { length } = this.detailInfos

      for (let index = 0; index < length; index++) {
        //  校验规则
        const res = await this.$refs[`detailInfo${index}`][0].confirm()
        result.push(res)
        if (!res) {
          break
        }
      }
      if (result.every((item) => item == true)) {
        this.handleSubmit()
      }
    },
    handleSubmit() {
      const { length } = this.detailInfos
      let form = {}
      for (let index = 0; index < length; index++) {
        if (this.$refs[`detailInfo${index}`][0].ruleForm) {
          form = Object.assign(this.$refs[`detailInfo${index}`][0].ruleForm, form)
        } else {
          console.log('对象为空')
        }
      }
      this.form = form
      eval('this.' + this.apiMethods[this.type] + '()')
    },

    async userConfirm() {
      try {
        const menuApi = {
          add: '/insertUser',
          edit: '/updateUser'
        }
        const paramsDate = {
          ...this.form
        }
        if (this.action == 'edit') {
          paramsDate.user_id = this.record.user_id
        }

        const res = await postReq(menuApi[this.action], paramsDate)
        if (res.errcode === 0) {
          setTimeout(() => {
            this.handleback()
          }, 1000)
        } else {
          throw res
        }
      } catch (error) {
        console.log(error, 'userConfirm')
      }
    },
    async roleConfirm() {
      try {
        const menuApi = {
          add: '/insertRole',
          edit: '/deleteRole'
        }
        const paramsDate = {
          ...this.form
        }
        if (this.action == 'edit') {
          paramsDate.role_id = this.record.role_id
        }

        const res = await postReq(menuApi[this.action], paramsDate)
        if (res.errcode === 0) {
          setTimeout(() => {
            this.handleback()
          }, 1000)
        } else {
          throw res
        }
      } catch (error) {
        console.log(error, 'roleConfirm')
      }
    },
    async stationConfirm() {
      try {
        const menuApi = {
          add: '/insertStation',
          edit: '/updateStation'
        }
        const paramsDate = {
          ...this.form
        }
        if (this.action == 'edit') {
          paramsDate.station_id = this.record.station_id
        }

        const res = await postReq(menuApi[this.action], paramsDate)
        if (res.errcode === 0) {
          setTimeout(() => {
            this.handleback()
          }, 1000)
        } else {
          throw res
        }
      } catch (error) {
        console.log(error, 'stationConfirm')
      }
    },
    handleback() {
      this.$emit('operateForm', 'back')
    },
    getObjIds(selectKeys) {
      const ids = []
      for (let i = 0; i < selectKeys.length; i++) {
        ids.push({ id: selectKeys[i] })
      }

      return ids
    }
  }
}
</script>
<style lang="scss" scoped>
.editCom {
  // height:400px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.detail-header {
  display: flex;

  span,
  div {
    margin: 10px;
  }
}

:deep(.ant-picker) {
  color: var(--theme-text-default) !important;
}
</style>