返回

SecondLevelPage组件

<template>
  <div class="mainRight-container">

    <el-form
      v-if="success"
      ref="ruleForm"
      label-width="80px"
      size="mini"
      class="employee-add-form"
      :rules="rules"
      :model="ruleForm"
    >
      <choose-dialog ref="chooseDialog" @choose="handleChoose($event)" />
      <div v-for="(item,index) in forms" :key="index" class="form-list">
        <header v-if="item.title" class="form-list-title">{{ item.title }}</header>
        <el-form-item
          v-for="(formItem,formItemIndex) in item.data"
          :key="formItemIndex"
          :label="formItem.label"
          :prop="formItem.prop"
        >

          <template v-if="formItem.type==='input'">
            <span v-html="formItem.prefix" />
            <el-input
              v-model="ruleForm[formItem.prop]"
              :data-model="formItem.prop"
              :disabled="'disabled' in formItem.input?Boolean(formItem.input.disabled):false"
              :placeholder="formItem.input.placeholder"
              :type="'type' in formItem.input ?formItem.input.type:'text'"
            />
            <span v-html="formItem.suffix" />
          </template>

          <template v-else-if="formItem.type==='textarea'">
            <span v-html="formItem.prefix" />
            <el-input
              v-model="ruleForm[formItem.prop]"
              :data-model="formItem.prop"
              :disabled="'disabled' in formItem.input?Boolean(formItem.input.disabled):false"
              :placeholder="formItem.input.placeholder"
              type="textarea"
              :rows="5"
            />
            <span v-html="formItem.suffix" />
          </template>

          <template v-else-if="formItem.type==='select'">
            <el-select
              v-model="ruleForm[formItem.prop]"
              :placeholder="formItem.input.placeholder"
            >
              <el-option
                v-for="selectItem in formItem.input.selectList"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
              >
                {{ selectItem.label }}
              </el-option>
            </el-select>
          </template>

          <template v-else-if="formItem.type==='province'">
            <province @selectChange="provinceChange" />
          </template>
          <template v-else-if="formItem.type==='choose'">
            <el-input v-model="ruleForm[formItem.prop]" disabled />
            <el-button class="form-list-item__btn" @click="showChooseDialog(formItem.prop,formItem.baseSettings,formItem.columns)">选择</el-button>
          </template>
          <template v-else-if="formItem.type==='date'">
            <el-date-picker
              v-model="ruleForm[formItem.prop]"
              align="right"
              type="date"
              placeholder="选择日期"
              @[formItem.event.type]="formItem.event.fn(ruleForm)"
            />
          </template>

          <template v-else-if="formItem.type==='radio'">
            <el-radio-group v-model="ruleForm[formItem.prop]">
              <el-radio
                v-for="(radioItem,radioIndex) in formItem.radioList"
                :key="radioIndex"
                :label="radioItem.label"
              >{{ radioItem.value }}</el-radio>

            </el-radio-group>
          </template>

          <template v-else-if="formItem.type==='checkbox'">
            <el-checkbox-group v-model="ruleForm[formItem.prop]">
              <el-checkbox
                v-for="(checkItem,checkIndex) in formItem.checkList"
                :key="checkIndex"
                :label="checkItem.label"
              >{{ checkItem.value }}</el-checkbox>
            </el-checkbox-group>
          </template>

          <template v-else-if="formItem.type==='uploadImg'">
            <upload-img v-model="ruleForm.logoId" />
          </template>

          <template v-else-if="formItem.type==='combine'">
            <input-combine />
          </template>

          <template v-else-if="formItem.type==='tag'">
            <tag-select :value.sync="ruleForm[formItem.prop]" :tags="formItem.tagList" />
          </template>

          <template v-else-if="formItem.type==='edit'">
            <Editormd />
          </template>
        </el-form-item>
      </div>
      <div class="form-btnConatiner">
        <el-button
          class="form-btnConatiner__btn"
          data-state="cancel"
          @click="$router.go(-1)"
        >取消</el-button>
        <el-button
          class="form-btnConatiner__btn"
          data-state="success"
          @click="onSubmit"
        >确定</el-button>
      </div>
    </el-form>
    <choose-dialog />
  </div>
</template>
<script>
import tagSelect from './components/tag-select'
import inputCombine from './components/inputCombine'
import tree from './components/tree'
import validate from '@/utils/form-validate/index'
import Editormd from '@/components/Editormd'
import uploadImg from './components/upload-img'
import province from './components/province.vue'
import { addOrg, judgeName } from '@/api/mechanism'
import { isFunction } from '@/utils/checkType'
import chooseDialog from './components/choose-dialog'

export default {
  components: {
    province,
    uploadImg,
    Editormd,
    inputCombine,
    tagSelect,
    tree,
    chooseDialog
  },
  props: {
    baseSettings: {
      type: Object,
      default: function() {
        return {

        }
      }
    },
    forms: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      success: false,
      ruleForm: {

      },
      rules: {

      }
    }
  },
  async mounted() {
    var form = {}
    var ruleObj = {}
    var typeInitial = {
      checkbox: function() {
        return []
      },
      tag: function() {
        return []
      }
    }

    var setProp = function(type, typeInitial) {
      var result = ''
      if (type in typeInitial) {
        if (isFunction(typeInitial[type])) {
          result = typeInitial[type]()
        } else {
          result = typeInitial[type]
        }
      }
      return result
    }
    this.forms.forEach(fields => {
      fields.data.forEach(field => {
        var { prop, rules, type } = field
        form[prop] = setProp(type, typeInitial)
        ruleObj[prop] = []
        if (Array.isArray(rules) && rules.length) {
          rules.forEach(item => {
            ruleObj[prop].push(isFunction(item) ? item.apply(this) : item)
          })
        }
      })
    })
    await (this.ruleForm = form)
    await (this.rules = ruleObj)

    var { mounted } = this.baseSettings
    if (isFunction(mounted)) {
      mounted.apply(this)
    }
    this.success = true
  },
  methods: {
    showChooseDialog(prop, baseSettings, columns) {
      this.$refs.chooseDialog.show({
        prop,
        baseSettings,
        columns
      })
    },
    provinceChange(province, city) {
      this.ruleForm.province = province
      this.ruleForm.city = city
    },
    handleChoose({ value, prop }) {
      console.log(value, prop)
      this.ruleForm[prop] = value
    },
    onSubmit() {
      var form = this.$refs['ruleForm']
      var interfaceFn = this.baseSettings.interface
      var successFn = this.baseSettings.successFn
      console.log(!isFunction(interfaceFn))
      if (!isFunction(interfaceFn)) {
        return
      }
      form.validate(async(valid, fields) => {
        try {
          if (valid) {
            // 调用接口
            await interfaceFn(this.ruleForm)
            // 调用成功后的相关操作
            if (isFunction(successFn)) {
              successFn.apply(this)
            }
          } else {
            // 清楚不要的检测字段
            const fieldsArr = Object.keys(fields)
            const props = fieldsArr.slice(1)
            if (props.length) {
              form.clearValidate(props)
            }
            const formEl = form.$el
            setTimeout(() => {
              const errorParent = formEl
                .querySelector('.el-form-item__error')
                .closest('.el-form-item__content')
              const FirstInputEl = errorParent.querySelector('input')
              if (FirstInputEl instanceof Element) {
                FirstInputEl.focus()
              }
              errorParent.scrollIntoViewIfNeeded
                ? errorParent.scrollIntoViewIfNeeded()
                : errorParent.scrollIntoView()
            }, 0)
            throw new Error(fields[fieldsArr[0]][0].message)
          }
        } catch (e) {
          this.$errorMessage(e.message)
        }
      })
    }
  }
}
</script>

input

{
    prop: 'name',
    field: 'name',
    label: '数据集名称',
    type: 'input',
    input: {
        type: 'text',
        placeholder: '请输入数据集名称',
        diaabled: 'false'
    },
    rules: [
        { required: true, message: '请输入数据集名称', trigger: 'blur'}
    ]
}

textarea

{
    prop: 'logoId',
    field: 'logoId',
    label: '数据集简介',
    type: 'textarea',
    input: {
        placeholder: '最多可输入200个字'
    },
    tip: '视频封面是指在商品列表展示的图片。建议尺寸750*560px或4：3，JPG、PNG格式， 图片小于5M。',
    rules: [
        { required: true, message: '请上传课程封面', trigger: 'blur' }
    ]
}

select

{
    prop: 'direction',
    field: 'direction',
    label: '数据集文件',
    type: 'select',
    input: {
    placeholder: '请选择课程方向',
    selectList: [
      {
        label: '云计算与大数据',
        value: '云计算与大数据'
      },
      {
        label: '人工智能',
        value: '人工智能'
      }
    ]
    },
    rules: [
    { required: true, message: '请输入机构属性', trigger: 'blur' }
    ]
}

province

{
    prop: 'province',
    field: ['province', 'city'],
    label: '所属省份',
    type: 'province',
    input: [
    {
        placeholder: '请选择省份'
    },
    {
        plcaeholder: '全部'
    }
    ],
    rules: []
}

radio

{
    prop: 'status',
    field: 'status',
    label: '状态',
    type: 'radio',
    input: {
    placeholder: '请选择状态'
    },
    radioList: [
    {
        label: 0,
        value: '启用'
    },
    {
        label: 1,
        value: '禁用'
    }
    ],
    rules: [
    { required: true, message: '请输入状态', trigger: 'blur' }
    ]
}

checkbox

{
    prop: 'webinfoMenuIds',
    field: 'webinfoMenuIds',
    label: '授权',
    type: 'checkbox',
    checkList: [
    {
        label: 0,
        value: '网站首页'
    },
    {
        label: 1,
        value: '课程'
    },
    {
        label: 2,
        value: '项目'
    },
    {
        label: 3,
        value: '数据集'
    },
    {
        label: 4,
        value: '面试'
    },
    {
        label: 5,
        value: '讨论'
    },
    {
        label: 6,
        value: '资料'
    },
    {
        label: 7,
        value: '个人中心'
    }
    ],
    rules: [
    { required: true, message: '请选择授权', trigger: 'blur' }
    ]
},

uploadImg

{
    prop: 'logoId',
    field: 'logoId',
    label: 'LOGO',
    type: 'uploadImg',
    tip: '建议尺寸160*40px，JPG、PNG、JPEG格式， 图片小于5M。'
}

combine

{
    prop: 'videos',
    field: 'videos',
    label: '数据集概述',
    type: 'combine',
    rules: [
    { required: true, message: '请补全视频信息', trigger: 'blur' }
    ]
},

tag

{
    prop: 'labels',
    field: 'labels',
    label: '数据集分类',
    type: 'tag',
    tagList: [
    {
        label: 'Python',
        value: 'Python'
    },
    {
        label: '人工智能',
        value: '人工智能'
    }, {
        label: '大数据',
        value: '大数据'
    }
    ],
    rules: [
    { required: true, message: '请选择标签', trigger: 'blur' }
    ]
},

edit

{
    prop: 'videos',
    field: 'videos',
    label: '数据集概述',
    type: 'edit',
    rules: [
    { required: true, message: '请补全视频信息', trigger: 'blur' }
    ]
},

date

{
  prop: 'expStart',
  field: 'expStart',
  label: '开始日期',
  type: 'date',
  rules: [
    { required: true, message: '请选择开始日期', trigger: 'blur' }
  ],
  event: {
    type: 'change',
    fn: function(ruleForm) {
      var { expStart, expEnd } = ruleForm
      if (expStart && expEnd) {
        ruleForm.day = (expEnd - expStart) / (3600 * 1000 * 24)
      }
    }
  }
},