thoth-frontend-test/src/views/ToConfigure/components/toConfigureNodel.vue

<template>
  <el-dialog :title="title" :visible.sync="show" width="30%" class="demo-dialog" :before-close="handleClose" :close-on-click-modal="false">
    <div class="blueStripe" />
    <el-form ref="ruleForm" :model="ruleForm" label-position="left" status-icon :rules="rules" label-width="80px">
      <el-form-item label="请选择" prop="name">
        <el-select v-model="ruleForm.name" multiple placeholder="请选择" style="width: 100%;">
          <el-option v-for="(item,index) in modelList" :key="item.id + index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="createTemplate">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectBizUnAddTemplates, addBizTemplates } from '@/api/toConfigure.js'
export default {
  props: {
    data: { type: Object, default: null },
    show: { type: Boolean, default: false, required: true },
    title: { type: String, default: '增加模版项' }
  },
  data() {
    return {
      ruleForm: {
        name: []
      },
      modelList: [],
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  created() {
    this.selectBizUnAddTemplates()
  },
  methods: {
    async selectBizUnAddTemplates() {
      const res = await selectBizUnAddTemplates(this.bizId)
      if (res.code === 200) {
        this.modelList = res.data
      }
    },
    createTemplate() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          const data = { bizId: this.bizId, templateIds: this.ruleForm.name }
          const res = await addBizTemplates(data)
          if (res.code === 200) {
            this.selectBizUnAddTemplates()
            this.$emit('update')
            this.$nextTick(() => {
              this.$refs.ruleForm.resetFields()
            })
            this.$message({ message: '模块添加成功', type: 'success', duration: 1000, offset: 150 })
          }
        }
      })
    },
    handleClose() {
      this.$emit('update')
      this.ruleForm.name = []
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-ruleForm {
  padding: 0 30px;
}
.demo-dialog {
  /deep/ .el-dialog__title {
    line-height: 24px;
    font-size: 16px;
    color: #303133;
    padding-left: 10px;
}
}
.blueStripe {
  width:4px;
  height:17px;
  background:#409EFF;
  border-radius:1px;
  position: absolute;
  top: 23px;
  left: 20px;
}
</style>