kd-aiot-frontend/src/views/versionManage/components/addOrEditDialog.vue

<template>
  <ele-modal custom-class="ele-dialog-form long-dialog-form"
             :centered="true" :visible.sync="addOrEditDialogFlag" :title="title"
             append-to-body
             :close-on-click-modal="false" width="28%" :before-close="cancel">
    <el-form ref="form" :model="form" :rules="rules" class="el-form-box" label-width="110px">
      <headerTitle title="基本信息"/>
      <el-row :gutter="12">
        <el-col :span="12">
          <div style="margin:0 0 10px 70px">
            <span>示例</span>
            <span style="color: red;margin-left: 10px">
               {{ getExample }}
             </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <el-form-item label="分类" prop="type">
<!--            <ele-tree-select-->
<!--              clearable-->
<!--              :data="typeList"-->
<!--              v-model="form.type"-->
<!--              placeholder="请选择"-->
<!--              valueKey="id"-->
<!--              labelKey="name"-->
<!--              childrenKey="subList"-->
<!--            />-->
            <DictSelection dictName="版本规则分类" clearable filterable v-model="form.type" :isProhibit="type=='view'">
            </DictSelection>
<!--            <el-select v-model="form.type" filterable style="width: 100%;" :disabled="type=='view'">-->
<!--              <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name"></el-option>-->
<!--            </el-select>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" :disabled="type=='view'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <el-form-item label="大版本采用" prop="noteType">
            <el-select v-model="form.noteType" @change="handleNoteType" :disabled="type=='view'" style="width: 100%;">
              <el-option :value="1" label="字母"></el-option>
              <el-option :value="2" label="数字"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="位数" prop="noteNum" label-width="50px">
            <el-select v-model="form.noteNum" style="width: 100%;" :disabled="type=='view'">
              <el-option :value="1" label="1"></el-option>
              <el-option :value="2" label="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <el-form-item label="大版本初始值" prop="note">
            <el-input v-model="form.note" :disabled="type=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <span style="margin-left: 10px;line-height: 38px;color: red">默认字母A，数字1</span>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <el-form-item label="连接符" prop="mark">
            <el-input v-model="form.mark" :disabled="type=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <el-form-item label="小版本初始值" prop="versionNumber">
            <el-input type="number" v-model="form.versionNumber" :disabled="type=='view'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="位数" prop="versionNum" label-width="50px">
            <el-select v-model="form.versionNum" style="width: 100%;" :disabled="type=='view'">
              <el-option :value="1" label="1"></el-option>
              <el-option :value="2" label="2"></el-option>
              <el-option :value="3" label="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="16">
          <el-form-item label="变更后版本">
            <el-select v-model="form.changeType" style="width: 100%;" :disabled="type=='view'">
              <el-option :value="1" label="提升大版本"></el-option>
              <el-option :value="2" label="提升小版本"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button v-if="type!=='view'" type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>
import {getDetailsByIdAPI, versionManageSaveAPI, versionManageUpdateAPI} from "@/api/versionManage";
import {getInfoById} from "@/api/classifyManage";

export default {
  name: "addOrEditDIalog",
  props: {
    addOrEditDialogFlag: Boolean,
    typeList: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      title: '',
      type: '',
      form: {
        id: '',
        type: '',
        name: '',
        noteType: 1,
        noteNum: 1,
        note: 'A',
        mark: '.',
        versionNumber: '1',
        versionNum: 1,
        changeType: 1,
      },

    }
  },
  computed: {
    getExample() {
      let value = this.form.note || (this.form.noteType == 1 ? 'A' : '1')
      return value + this.form.mark + this.form.versionNumber
    },
    rules() {
      return {
        type: [{required: true, message: '请选择', trigger: 'change'}],
        name: [{required: true, message: '请输入', trigger: 'blur'}],
        noteType: [{required: true, message: '请选择', trigger: 'change'}],
        noteNum: [{required: true, message: '请选择', trigger: 'change'}],
        mark: [
          {required: true, message: '请输入', trigger: 'blur'},
          {validator: this.markValidate, trigger: ['blur']},
        ],
        note: [{required: false, validator: this.noteValidate, trigger: 'blur'}],
        versionNum: [
          {required: true, message: '请输入', trigger: ['blur', 'change']},

        ],
        versionNumber: [
          {required: true, message: '请输入', trigger: 'blur'},
          {validator: this.versionNumValidate, trigger: ['blur', 'change']},
        ],
      }
    }
  },
  methods: {
    handleNoteType(val) {
      this.form.note = val == 1 ? 'A' : '1'
    },
    noteValidate(rule, value, callback) {
      if (!value) callback()
      let regex = this.form.noteType == 1 ? `[A-Z]` : `[0-9]`
      let regexA = new RegExp(`^${regex}{${this.form.noteNum}}$`)
      if (!regexA.test(value)) {
        callback(new Error('输入格式错误'))
      }
      callback()
    },
    versionNumValidate(rule, value, callback) {
      if (!value) callback('请输入')
      let regex = `[0-9]`
      let regexA = new RegExp(`^${regex}{${this.form.versionNum}}$`)
      if (!regexA.test(value)) {
        callback(new Error('输入格式错误'))
      }
      callback()
    },
    markValidate(rule, value, callback) {
      if (!value) callback('请输入')
      const regex = /^[~*_\-:;,./]+$/;
      if (!regex.test(value)) {
        callback(new Error('输入格式错误,可选连接符(~ * _ \ - : ; , . /)'))
      }
      callback()
    },
    //页面初始化
    init(type, row = {}) {
      this.title = type == 'add' ? '新增' : type == 'edit' ? '修改' : '详情'
      this.type = type
      if (type !== 'add') {
        this.getDetail(row.id)
      }
    },
    async getDetail(id) {
      this.loading = true;
      this.form = await getDetailsByIdAPI(id);
      this.loading = false;
    },
    handleSave() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        const API = this.type == 'add' ? versionManageSaveAPI : versionManageUpdateAPI
        await API(this.form)
        this.$message.success('操作成功')
        this.cancel()
        this.$emit('reload')
      })

    },
    //关闭弹窗
    cancel() {
      this.$emit('update:addOrEditDialogFlag', false)
    },
  }
}
</script>


<style scoped lang="scss">

</style>