yxk-electronic-archives/src/views/system/metadata/form.vue

<template>
  <!--表单组件-->
  <el-dialog append-to-body :close-on-click-modal="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="100px">
        <el-form-item label="名称" prop="metadataName">
          <el-input v-model="form.metadataName" />
        </el-form-item>
        <el-form-item label="参照标准类型" prop="metadataType">
          <el-select v-model="form.metadataType" style="width: 225px;">
            <el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="参照标准号" prop="metadataStandardNumber">
          <el-input v-model="form.metadataStandardNumber" />
        </el-form-item>
        <el-form-item label="参照标准名" prop="metadataStandardName">
          <el-input v-model="form.metadataStandardName" />
        </el-form-item>
        <el-form-item label="标准范围说明" prop="metadataStandardRange">
          <el-input v-model="form.metadataStandardRange" rows="5" type="textarea" style="width: 594px;" />
        </el-form-item>
        <el-row>
          <el-form-item label="默认方案" prop="isDefault">
            <el-radio-group v-model="form.isDefault">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序" prop="isSequence">
            <el-input-number
              v-model.number="form.isSequence"
              :min="0"
              :max="999"
              controls-position="right"
            />
          </el-form-item>
        </el-row>
      </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, metadataName: null, metadataType: null, metadataStandardNumber: null, metadataStandardName: null, metadataStandardRange: null, isDefault: null, isSequence: null }
export default {
  mixins: [
    form(function() {
      return Object.assign({ }, defaultForm)
    })
  ],
  props: {
    selectedTreeItem: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      pid: null,
      isAdd: false,
      rules: {
        metadataName: [
          { required: true, message: '名称不可为空', trigger: 'blur' }
        ],
        isDefault: [
          { required: true, message: '请选择是否为默认方案', trigger: 'change' }
        ],
        isSequence: [
          { required: true, message: '排序不可为空', trigger: 'blur' }
        ]
      },
      selectOptions: [
        {
          value: '国家标准',
          label: '国家标准'
        },
        {
          value: '行业标准',
          label: '行业标准'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      selectedTemplateNode: {}
    }
  },
  created() {
    console.log(this.selectedTreeItem)
  },
  methods: {
    // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      // if (form.isDefault) {
      //   form.isDefault = form.isDefault ? '1' : '0'
      // }
    },
    // 编辑前
    [CRUD.HOOK.beforeToEdit](crud, form) {
      // crud.form.id = form.deptsId
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
  padding: 0 16px;
}
</style>