ibms/src/components/relation/relationShip/Modal/addRelationShip.vue

<template>
  <div class="change-relation-ship">
    <el-dialog
      :title="values.addShip"
      :visible.sync="addShipDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <p class="mb-20 color-AAA">{{values.codeTip}}</p>
        <el-form-item
          :label="values.codeTitle"
          prop="code"
          class="mb-20"
        >
          <el-input
            v-model="ruleForm.code"
            autocomplete="off"
            :placeholder="values.pleaseEnter"
          />
        </el-form-item>
        <el-row class="mb-20">
          <el-col :span="12">
            <p class="mb-20">{{values.mainObject}}
              <span class="fw-bold color-AAA">（包括：XXXX类型，XXXX类型）限制条件</span>
            </p>
            <el-form-item
              prop="main"
            >
              <el-input
                v-model="ruleForm.main"
                autocomplete="off"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <p class="mb-20">{{values.affiliatedObject}}
              <span class="fw-bold color-AAA ">（包括：XXXX类型，XXXX类型）限制条件</span>
            </p>
            <el-form-item
              v-for="(item,index) in ruleForm.codeList"
              :key="index"
              :prop="`codeList.${index}.value`"
              :rules="rules.codeList"
            >
              <el-input
                v-model="item.value"
                :placeholder="values.pleaseEnterCode"
                :disabled="disabled"

              />
              <el-button
                @click.prevent="removeCode(item)"
                icon="el-icon-circle-close"
                type="text"
                :disabled="disabled"

              />
            </el-form-item>
            <el-form-item>
              <el-button
                @click="addCode"
                icon="el-icon-circle-plus-outline"
                style="width: 220px;"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            class="fr ml-20"
            @click="submitForm('ruleForm')"
          >{{values.add}}
          </el-button>
          <el-button
            class="fr"
            @click="addShipDialog = false"
          >{{values.cancel}}
          </el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "addRelationShip",
    props: ['values'],
    data() {
      var checkCode = (rule, value, callback) => {
        //TODO
        callback()
        this.disabled = false
      }
      var checkMain = (rule, value, callback) => {
        //TODO
        callback()
      }
      var codeList = (rule, value, callback) => {
        //TODO
        callback()
      }
      return {
        addShipDialog: false,
        disabled: true,
        ruleForm: {
          code: '',
          main: '',
          codeList: [{
            value: ''
          }]
        },
        rules: {
          code: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: checkCode, trigger: 'blur'}
          ],
          main: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: checkMain, trigger: 'blur'}
          ],
          codeList: [
            {required: true, message: '请输入对应识别编码', trigger: 'blur'},
            {validator: codeList, trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      addCode() {
        this.ruleForm.codeList.push({
          value: '',
          key: Date.now()
        })
      },
      removeCode(item) {
        var index = this.ruleForm.codeList.indexOf(item)
        if (index !== -1) {
          this.ruleForm.codeList.splice(index, 1)
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.addShipDialog = false
            console.log('success')
          } else {
            console.log('error')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @color-text: #AAA;
  .change-relation-ship {
    /deep/ .el-form-item__label {
      width: auto !important;
    }

    .fr {
      float: right;
    }

    .mb-20 {
      margin-bottom: 20px;
    }

    .ml-20 {
      margin-left: 20px;
    }

    .color-AAA {
      color: @color-text
    }

    .fw-bold {
      font-weight: bold;
    }
  }
</style>