yxk-electronic-archives/src/views/system/fileLibraryManage/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-row>
          <el-form-item label="所属父级" prop="pid">
            <el-input v-model="parentName" disabled />
          </el-form-item>
        </el-row>
        <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;">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <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 { form } from '@crud/crud'
import CRUD from '@crud/crud'
const defaultForm = { id: null, pid: null, cnName: null, isType: null, remark: null, categorySeq: null }
export default {
  // components: { Treeselect },
  mixins: [
    form(function() {
      return Object.assign({ pid: this.pid }, defaultForm)
    })
  ],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      pid: null,
      parentName: null,
      rules: {
        // pid: [
        //   { required: true, message: '所属父级不可为空', trigger: 'blur' }
        // ],
        cnName: [
          { required: true, message: '名称不可为空', trigger: 'blur' }
        ],
        isType: [
          { required: true, message: '节点类型不可为空', trigger: 'change' }
        ]
      },
      selectOptions: [
        {
          value: 1,
          label: '文件夹'
        },
        {
          value: 2,
          label: '分类'
        }
      ]
    }
  },
  created() {
  },
  methods: {
    beforeToAdd() {
      this.form.isType = null
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU](crud) {
      this.form.pid = this.selectedCategory.id
      return true
    }
  }
}
</script>

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