jlst-patent/src/layout/trans/trans-create.vue

<template>
  <div id="trans-create">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one">
          <van-form @submit="onSubmit" label-width="5em">
            <van-field v-model="form.create_number" name="create_number" label="专利号" placeholder="请输入专利号" />
            <van-field v-model="form.patent_name" name="patent_name" label="专利名称" placeholder="请输入专利名称" />
            <van-field v-model="form.on_obligee" name="on_obligee" label="当前权利人" placeholder="请输入当前权利人" />
            <van-field v-model="form.on_afterobligee" name="on_afterobligee" label="变更后专利权人" placeholder="请输入变更后专利权人" />
            <van-field v-model="form.contact" name="contact" label="联系人" placeholder="请输入联系人" />
            <van-field v-model="form.phone" name="phone" label="联系电话" placeholder="请输入联系电话" />
            <van-field v-model="form.email" name="email" label="电子邮箱" placeholder="请输入电子邮箱" />
            <van-field name="budgetType" label="价格类型">
              <template #input>
                <van-radio-group v-model="form.budget_type" direction="horizontal">
                  <van-radio name="1">面议</van-radio>
                  <van-radio name="2">金额区间(万元)</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="form.budget_min" name="budget_min" type="digit" label="最小价格" placeholder="请输入价格" v-if="form.budget_type == '2'" />
            <van-field v-model="form.budget_max" name="budget_max" type="digit" label="最大价格" placeholder="请输入价格" v-if="form.budget_type == '2'" />
            <van-field name="type" label="交易类型">
              <template #input>
                <van-radio-group v-model="form.type" direction="horizontal">
                  <van-radio name="转让">转让</van-radio>
                  <van-radio name="许可">许可</van-radio>
                  <van-radio name="免费许可">免费许可</van-radio>
                  <van-radio name="招商">招商</van-radio>
                  <van-radio name="质押">质押</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-col span="24" class="typeThr" v-if="form.type == '免费许可'">
              <van-col span="24" class="title"> 免费许可承诺书 </van-col>
              <van-col span="24" class="info">
                公开声明：【{{ form.patent_name }}】专利权人许可本专利在【
                <span @click.prevent="typeSelect('province')">{{ form.promise_file.province }}</span>
                】【
                <span @click.prevent="typeSelect('city')">{{ form.promise_file.city }}</span>
                】范围内免费使用，期限至【
                <span @click.prevent="typeSelect('end_date')">{{ form.promise_file.end_date }}</span>
                】止，被许可人需与许可人签订许可合同后方可使用。
              </van-col>
              <van-popup v-model="oneShow" position="bottom">
                <van-picker show-toolbar :columns="provinceList" @confirm="oneFirm" @cancel="oneShow = false" />
              </van-popup>
              <van-popup v-model="twoShow" position="bottom">
                <van-picker show-toolbar :columns="cityList" @confirm="twoFirm" @cancel="twoShow = false" />
              </van-popup>
              <van-calendar v-model="thrShow" @confirm="thrFirm" :min-date="minDate" :max-date="maxDate" />
            </van-col>
            <van-field name="is_report" label="评估报告">
              <template #input>
                <van-radio-group v-model="form.is_report" direction="horizontal">
                  <van-radio :name="true">有</van-radio>
                  <van-radio :name="false">无</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field name="report" label="报告文件">
              <template #input>
                <van-uploader
                  :fileList="form.report"
                  :max-count="1"
                  :after-read="(file) => toUpload(file, 'report')"
                  @delete="(file) => toDelete(file, 'report')"
                />
              </template>
            </van-field>
            <van-field v-model="form.abstract" name="abstract" label="摘要" placeholder="请输入摘要" type="textarea" autosize rows="1" />
            <van-field v-model="form.requirementdesc" name="requirementdesc" label="技术说明" placeholder="请输入技术说明" type="textarea" autosize rows="1" />
            <van-field v-model="form.expect" name="expect" label="商业预期" placeholder="请输入商业预期" type="textarea" autosize rows="1" />
            <van-field v-model="form.condition" name="condition" label="合作条件及要求" placeholder="请输入合作条件及要求" type="textarea" autosize rows="1" />
            <van-field
              :value="form.transfer_date"
              name="transfer_date"
              label="专利权转移日期"
              placeholder="点击选择"
              @click="selectDate('transfer_date')"
              :rules="[{ required: false, message: '专利权转移日期' }]"
            />
            <!-- 选择日期公用弹框 -->
            <van-calendar v-model="calendarShow" @confirm="calendarCon" :min-date="minDate" :max-date="maxDate" />
            <van-field name="status" label="交易状态">
              <template #input>
                <van-radio-group v-model="form.status" direction="horizontal">
                  <van-radio name="1">转让信息</van-radio>
                  <van-radio name="2">交易公告</van-radio>
                  <van-radio name="5">已成交专利</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-col span="24" class="btn">
              <van-button type="info" size="small" native-type="submit">提交交易</van-button>
            </van-col>
          </van-form>
        </van-col>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: upload } = createNamespacedHelpers('upload');
const moment = require('moment');
export default {
  name: 'trans-create',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function () {
    return {
      type: '',
      // 省份
      oneShow: false,
      provinceList: ['吉林省'],
      // 城市
      twoShow: false,
      cityList: ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '白城市', '延边州', '松原市', '长白山管委会'],
      // 截止日期
      thrShow: false,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2050, 1, 1),
      // 专利转移日期
      calendarShow: false,
      calendar_type: '',
    };
  },
  created() {},
  methods: {
    ...upload(['upload']),
    onSubmit(value) {
      if (value) this.$emit('onSubmit', { data: this.form });
    },
    // 承诺书信息
    typeSelect(type) {
      this.$set(this, `type`, type);
      if (type == 'province') this.oneShow = true;
      else if (type == 'city') this.twoShow = true;
      else if (type == 'end_date') this.thrShow = true;
    },
    // 确认选择省份
    oneFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, value);
      this.oneShow = false;
    },
    // 确认选择城市
    twoFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, value);
      this.twoShow = false;
    },
    // 确认选择日历
    thrFirm(value) {
      this.$set(this.form.promise_file, `${this.type}`, moment(value).format('YYYY-MM-DD'));
      this.thrShow = false;
    },
    // 打开选择日期弹框
    selectDate(type) {
      this.$set(this, `calendar_type`, type);
      this.calendarShow = true;
    },
    // 选中日期
    calendarCon(date) {
      this.$set(this.form, this.calendar_type, moment(date).format('YYYY-MM-DD'));
      this.calendarShow = false;
    },
    async toUpload({ file }, model) {
      // 上传,赋值
      const res = await this.upload({ file, dir: 'file' });
      if (this.$checkRes(res)) {
        this.$set(this.form, model, [{ name: res.name, url: res.uri }]);
      }
    },
    toDelete(file, model) {
      const index = this.form[model].findIndex((f) => _.isEqual(f, file));
      this.form[model].splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .btn {
      text-align: center;
      margin: 10px 0;
    }
    .typeThr {
      padding: 10px;
      background-color: #fff;
      .title {
        text-align: center;
        font-weight: bold;
        margin: 0 0 15px 0;
      }
      .info {
        padding: 0 0 15px 0;
        line-height: 25px;
        border-bottom: 1px solid #ebedf0;
        span {
          color: #409eff;
        }
        span:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>