green-valley-admin/src/components/Development/DevelopmentAdd.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 添加 -->
    <a-modal
      :maskClosable="false"
      @cancel="$emit('closeModal')"
      destroyOnClose
      footer
      title="添加成果"
      v-model="visible"
      width="700px"
    >
      <a-form :form="form" @submit="handleSubmit">
        <!-- 成果名称 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果名称"
        >
          <a-input
            placeholder="请输入成果名称"
            v-decorator="[
                      'name',
                      {
                        rules: [
                          { required: true, message: '成果名称不能为空' },
                          { whitespace: true, message: '成果名称不能为空' },
                          { max: 140, massage: '成果名称最多140个字符' },
                        ],
                      },
                    ]"
          />
        </a-form-item>
        <!-- 成果水平 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果水平"
        >
          <a-select
            placeholder="请选择成果水平"
            style="width:100%"
            v-decorator="[
                      'level'
                    ]"
          >
            <a-select-option :key="type.id" :value="type.id" v-for="type in levels">{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 成果范围 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果范围"
        >
          <a-select
            placeholder="请选择成果范围"
            style="width:100%"
            v-decorator="[
                      'ranges'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in assignments"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 成果阶段 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果阶段"
        >
          <a-select
            placeholder="请选择成果阶段"
            style="width:100%"
            v-decorator="[
                      'stage'
                    ]"
          >
            <a-select-option :key="type.id" :value="type.id" v-for="type in stages">{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 成果表现形式 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果表现形式"
        >
          <a-select
            placeholder="请选择成果表现形式"
            style="width:100%"
            v-decorator="[
                      'performance'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in performances"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 成果标准 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="成果标准"
        >
          <a-select
            placeholder="请选择成果标准"
            style="width:100%"
            v-decorator="[
                      'standard'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in standards"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 申请人 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="申请人"
        >
          <a-input
            placeholder="请输入申请人"
            v-decorator="[
                      'applicant'
                    ]"
          />
        </a-form-item>
        <!-- 已转让企业数 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="已转让企业数"
        >
          <a-input
            placeholder="请输入已转让企业数"
            v-decorator="[
                      'assignment'
                    ]"
          />
        </a-form-item>
        <!-- 学科分类 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="学科分类"
        >
          <a-input
            placeholder="请输入学科分类"
            v-decorator="[
                      'classification'
                    ]"
          />
        </a-form-item>
        <!-- 所属领域 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="所属领域"
        >
          <a-checkbox-group @change="onChange($event,'domains','domain')">
            <a-checkbox
              :disabled="item.disabled"
              :key="item.id"
              :value="item.id"
              class="my-2"
              v-for="item in domains"
            >{{ item.value }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 知识产权 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="知识产权"
        >
          <a-select
            placeholder="请选择知识产权"
            style="width:100%"
            v-decorator="[
                      'finance'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in finances"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 编号 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="编号"
        >
          <a-input
            placeholder="请输入编号"
            v-decorator="[
                      'identifier'
                    ]"
          />
        </a-form-item>
        <!-- 转让收入 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="转让收入（万元）"
        >
          <a-input
            placeholder="请输入转让收入（万元）"
            v-decorator="[
                      'income'
                    ]"
          />
        </a-form-item>
        <!-- 发明人 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="发明人"
        >
          <a-input
            placeholder="请输入发明人"
            v-decorator="[
                      'inventor'
                    ]"
          />
        </a-form-item>
        <!-- 关键词 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="关键词"
        >
          <div class="d-flex flex-nowrap">
            <a-input
              class="mr-2"
              placeholder="关键词1"
              v-decorator="[
                      'keywordone'
                    ]"
            />
            <a-input
              class="mr-2"
              placeholder="关键词2"
              v-decorator="[
                      'keywordtwo'
                    ]"
            />
            <a-input
              placeholder="关键词3"
              v-decorator="[
                      'keywordthree'
                    ]"
            />
          </div>
        </a-form-item>
        <!-- 转让形式 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="转让形式"
        >
          <a-select
            placeholder="请选择转让形式"
            style="width:100%"
            v-decorator="[
                      'layout'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in layouts"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 类型 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="类型"
        >
          <a-checkbox-group
            v-decorator="[
                      'modelIds',
                      {
                        rules: [
                          { required: true, message: '类型不能为空' },
                        ],
                      },
                    ]"
          >
            <a-checkbox :key="item.id" :value="item.id" v-for="item in typeLists.list">{{ item.name }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 专利数 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="专利数"
        >
          <a-input
            placeholder="请输入专利数"
            v-decorator="[
                      'nums'
                    ]"
          />
        </a-form-item>
        <!-- 专利情况 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="专利情况"
        >
          <a-select
            placeholder="请选择专利情况"
            style="width:100%"
            v-decorator="[
                      'patent'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in patents"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 图片 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="图片"
        >
          <a-upload
            :action="upload"
            :before-upload="beforeUpload"
            @change="handleChange"
            list-type="picture"
            name="files"
            v-decorator="[
                      'pic',
                      {
                        rules: [
                          { required: true, message: '图片不能为空' },
                        ],
                      },
                    ]"
          >
            <a-button v-show="fileList.length - 0 === 0">
              <a-icon type="upload" />选择图片
            </a-button>
          </a-upload>
        </a-form-item>
        <!-- 未应用原因 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="未应用原因"
        >
          <a-checkbox-group @change="onChange($event,'reasons','reason')">
            <a-checkbox
              :disabled="item.disabled"
              :key="item.id"
              :value="item.id"
              class="my-2"
              v-for="item in reasons"
            >{{ item.value }}</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <!-- 专利名称 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="专利名称"
        >
          <a-input
            placeholder="请输入专利名称"
            v-decorator="[
                      'registerName'
                    ]"
          />
        </a-form-item>
        <!-- 专利号 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="专利号"
        >
          <a-input
            placeholder="请输入专利号"
            v-decorator="[
                      'registerNum'
                    ]"
          />
        </a-form-item>
        <!-- 所属单位 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="所属单位"
        >
          <a-select
            placeholder="请选择所属单位"
            style="width:100%"
            v-decorator="[
                      'research'
                    ]"
          >
            <a-select-option
              :key="index"
              :value="type.id"
              v-for="(type, index) in types.list"
            >{{ type.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 研究形式 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="研究形式"
        >
          <a-select
            placeholder="请选择研究形式"
            style="width:100%"
            v-decorator="[
                      'shape'
                    ]"
          >
            <a-select-option :key="type.id" :value="type.id" v-for="type in shapes">{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 应用状态 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="应用状态"
        >
          <a-select
            placeholder="请选择应用状态"
            style="width:100%"
            v-decorator="[
                      'situation'
                    ]"
          >
            <a-select-option
              :key="type.id"
              :value="type.id"
              v-for="type in situations"
            >{{ type.value }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 专利类型 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="专利类型"
        >
          <a-input
            placeholder="请输入专利类型"
            v-decorator="[
                      'style'
                    ]"
          />
        </a-form-item>
        <!-- 简介 -->
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="简介"
          required
        >
          <quill-editor :max-size="maxSize" :placeholder="placeholder" @changeInput="changeInput" />
        </a-form-item>

        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { upload, selResAdd } from 'config/api';
import { mapActions } from 'vuex';
import QuillEditor from 'components/QuillEditor/QuillEditor.vue';
import addMixin from './mixins/addMixin.js';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};
const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'DevelopmentAdd',
  props: { visible: { type: Boolean, default: false }, typeLists: { type: Array, default: () => [] } },
  components: { QuillEditor },
  mixins: [addMixin],
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'development-add' }),
      upload: upload,
      fileList: [],
      //限制文件上传的格式和大小
      beforeUpload: file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('仅支持 JPG/PNG 格式的图片!');
        }
        return isJpgOrPng;
      },
      types: [],
      maxSize: 2048,
      content: '',
      placeholder: '请输入...',
      domain: [], // 所属领域
      reason: [], // 未应用原因
    };
  },

  async created() {
    const params = {
      param: {
        pageNum: 1,
        pageSize: 10,
        model: 2,
      },
    };
    this.types = await this.getSelModelSearch(params);
  },

  methods: {
    ...mapActions(['getSelModelSearch']),

    // 多选最多两项（所属领域、未应用原因）
    onChange(checkedValues, arr, type) {
      this[type] = checkedValues;
      this[arr][checkedValues[0]].disabled = false;
      if (checkedValues.length < 2) {
        for (let i = 0; i < this[arr].length; i++) {
          const item = this[arr][i];
          item.disabled = false;
        }
      }
      if (checkedValues.length > 1) {
        for (let i = 0; i < this[arr].length; i++) {
          const item = this[arr][i];
          item.disabled = true;
          for (let j = 0; j < checkedValues.length; j++) {
            const element = checkedValues[j];
            if (item.id === element) {
              item.disabled = false;
            }
          }
        }
      }
    },

    // 上传图片
    handleChange(info) {
      if (info.file.status === 'done') {
        this.fileList.push(info.file.response.data[0].id);
      } else if (info.file.status === 'removed') {
        this.fileList = info.fileList;
      }
    },

    // 修改内容
    changeInput(value) {
      this.content = value;
    },

    // 简介必填验证
    verificationContent() {
      if (this.content === '') {
        this.$message.error('请输入简介');
        return false;
      }
      return true;
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            if (!this.verificationContent()) return;
            const { fileList, domain, reason, content } = this;
            const params = { param: values };
            params.param.pic = fileList[0];
            params.param.content = content;
            if (domain && domain.length > 0) {
              params.param.domainone = domain[0];
              params.param.domaintwo = domain[1] ? domain[1] : '';
            }
            if (reason && reason.length > 0) {
              params.param.reansonone = reason[0];
              params.param.reansontwo = reason[1] ? reason[1] : '';
            }
            const res = await selResAdd(params);
            const { data, msg, code } = res.data;
            // 清除新建项目标志数据
            if (code === 200) {
              this.$message.success('添加成功');
              this.$emit('handleTableChange');
            } else {
              throw msg;
            }
            this.$emit('closeModal');
          } catch (error) {
            this.$emit('closeModal');
            this.$message.error(error || '添加成果失败');
          }
        }
      });
    },
  },
};
</script>

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