admin_web/ruoyi-ui/src/views/base/addBase/blocks/detailDialog.vue

<template>
  <!-- 列表选择弹窗 -->
  <f-dialog
    ref="dialog"
    title="基础库配置信息"
    :initData="handleInitData"
    :isDetermine="dialogType!=='detail'"
    :beforeClose="handleBeforeClose"
    width="1100px"
  >
    <template #contain>
      <f-form
        ref="ruleForm"
        :form="fromData"
        :disabled="dialogType==='detail'"
        :config="fromDataConfig"
        :rules="fromRules"
        label-position="left"
        :column="2"
        :key="fromKey"
      />
    </template>
  </f-dialog>
</template>
<script>
import { addBaseApi } from '@/api/base/addBase'

export default {
  name: "DetailDialog",
  props: {
    // 表单数据
    rowData:{
      type:Object,
      default:()=>{}
    },
    // 表单类型 add detail edit
    dialogType:{
      type:String,
      default:'add'
    }
  },
  data() {
    return {
      // 数据对象
      fromData:{
      },
      // 表单配置
      fromDataConfig:[
        {
          itemType: "input",
          prop: "name",
          label:'基础库名',
          attrs: {
            placeholder: "请输入基础库名"
          },
        },
        {
          itemType: "input",
          prop: "bandValue",
          label:'波段值',
          attrs: {
            inputType:'Number',
            placeholder: "请输入波段值，默认38000"
          },
        },
        {
          itemType: "input",
          prop: "repeatCode",
          label:'重复码',
          attrs: {
            placeholder: "请输入重复码"
          },
        },
        {
          itemType: "input",
          prop: "bootCode",
          label:'引导码',
          attrs: {
            placeholder: "请输入引导码"
          },
        },
        {
          itemType: "input",
          prop: "bootCodeSend",
          label:'引导码发送次数',
          attrs: {
            inputType:'Number',
            placeholder: "请输入引导码发送次数"
          },
        },
        {
          itemType: "input",
          prop: "synchronizeCode",
          label:'同步码',
          attrs: {
            placeholder: "请输入同步码"
          },
        },
        {
          itemType: "input",
          prop: "synchronizeCodeSend",
          label:'同步码发送次数',
          attrs: {
            inputType:'Number',
            placeholder: "请输入同步码发送次数"
          },
        },
        {
          itemType: "input",
          prop: "dateCode",
          label:'数据',
          attrs: {
            placeholder: "请输入数据",
            span:2,
            type:'textarea'
          },
        },
        {
          itemType: "input",
          prop: "overCode",
          label:'结束码',
          attrs: {
            placeholder: "请输入结束码"
          },
        },
        {
          itemType: "input",
          prop: "dateBinary0",
          label:'数据二进制0',
          attrs: {
            placeholder: "请输入数据二进制0"
          },
        },
        {
          itemType: "input",
          prop: "dateBinary1",
          label:'数据二进制1',
          attrs: {
            placeholder: "请输入数据二进制1"
          },
        }
      ],
      // 表单验证
      fromRules:{
        name:[{required: true, message: '请输入基础库名'}],
        bootCode:[{required: true, message: '请输入引导码'}],
        bootCodeSend:[{required: true, message: '请输入引导码发送次数'}],
        dateCode:[{required: true, message: '请输入数据'}],
        overCode:[{required: true, message: '请输入结束码'}],
        dateBinary0:[{required: true, message: '请输入数据二进制0'}],
        dateBinary1:[{required: true, message: '请输入数据二进制1'}]
      },
      // 表单key
      fromKey:0
    };
  },
  methods: {
    // 显示弹窗
    show(){
      this.$refs.dialog.show();
    },
    // 初始化表单数据
    initFormData(fromData){
      this.fromData = {
          content:'',
          ...fromData
      }
      this.fromKey++;
    },
    // 详情
    async handleInitData(){
      const {dialogType,rowData} = this;
      if(dialogType === 'add') return this.initFormData({})
      // 调接口获取详情
      const res = await addBaseApi.configDetail({ id: rowData.id });
      if(res.code != 200) return this.initFormData({})
      const from = { ...res.data }
      this.initFormData(from);
    },
    // 关闭之前回调.
    async handleBeforeClose(type){
      if(type !='ok') return true;
      const validate = await this.$refs.ruleForm.validate();

      if(!validate) return false;
      const params = {
        ...this.fromData,
        // bandValue: Number(this.fromData.bandValue),
        // bootCodeSend: Number(this.fromData.bootCodeSend)
      }
      //  调接口更新数据
      const res = await addBaseApi.configAddOrEdit(params);
      if(res.code !=200){
          this.$modal.msgError(res.msg);
          return false;
      }

      this.$emit('updateList')
      this.initFormData({})
      return true;
    }
  }
}
</script>
<style scoped lang="scss"></style>