localization-management-system/src/views/inquiryMachine/form.vue

<template>
  <!--表单组件-->
  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
    <div class="setting-dialog">
      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="90px">
        <el-form-item v-if="selectedMenu.pid === '0'" label="所属父级" prop="parentName">
          <el-input v-model="selectedMenu.cnName" disabled />
        </el-form-item>
        <el-form-item v-else label="所属父级" prop="parentName">
          <el-input v-model="selectedMenu.parentName" disabled />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="名称" prop="cnName">
          <el-input v-model="form.cnName" />
        </el-form-item>
        <el-form-item label="菜单类型" prop="isType">
          <el-select v-model="form.isType" style="width: 225px;" @change="changeType">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-form-item style="width: 100%;" label="栏目绑定" prop="bind" class="is-required selecct-dropdown">
            <el-select v-model="form.bind" style="width: 584px" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeColumn">
              <el-option v-for="item in columnDatas" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 580px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { FetchInitQueryTopic } from '@/api/inquiryMachine/column'
import { form } from '@crud/crud'
import CRUD from '@crud/crud'

const defaultForm = { id: null, parentName: null, cnName: null, code: null, bind: null, isType: null, remark: null }
export default {
  mixins: [
    form(function() {
      return Object.assign({ pid: this.pid }, defaultForm)
    })
  ],
  props: {
    selectedMenu: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      pid: null,
      isAdd: false,
      rules: {
        parentLevel: [
          { required: true, message: '所属父级不可为空', trigger: 'blur' }
        ],
        cnName: [
          { required: true, message: '名称不可为空', trigger: 'blur' }
        ],
        isType: [
          { required: true, message: '菜单类型不可为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '编码不可为空', trigger: 'blur' }
        ],
        bind: [
          { required: true, message: '栏目绑定不可为空', trigger: 'change' }
        ]
      },
      selectOptions: [
        { value: 1, label: '菜单' },
        { value: 2, label: '栏目显示' },
        { value: 3, label: '栏目列表' },
        { value: 4, label: '新书推荐' }
      ],
      columnDatas: [],
      templateTree: [],
      selectedTemplateNode: {},
      bindColumn: []
    }
  },
  watch: {
    selectedMenu: function(newValue, oldValue) {
      // console.log('newValue', newValue)
    }
  },
  created() {
    this.getInitQueryTopic()
  },
  methods: {
    getInitQueryTopic() {
      FetchInitQueryTopic().then(res => {
        this.columnDatas = res.content
      })
    },
    changeColumn(value) {
      this.bindColumn = []
      value.forEach(function(data, index) {
        const role = { id: data }
        this.bindColumn.push(role)
      })
    },
    deleteTag(value) {
      this.bindColumn.forEach(function(data, index) {
        if (data.id === value) {
          this.bindColumn.splice(index, value)
        }
      })
    },
    beforeToAdd() {
      this.form.isType = null
    },
    [CRUD.HOOK.beforeSubmit]() {
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      // delete crud.form.parentName
      console.log(crud.form)
      return false
    },
    updateTemplateValue(node, instanceId) {
      this.selectedTemplateNode = node
    },
    changeType() {
      this.isAdd = this.form.isType === 2
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.cnName,
        children: node.children,
        isDisabled: node.isType !== 2 && node.isType !== 3 && node.isType !== 5
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>