admin-cms/src/layout/financingTNewAssign/tNewAssignForm.vue

<template>
  <div id="tNewAssignForm">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <span class="shu"></span><span class="title">{{ formTitle }}</span>
        </el-col>
        <el-col :span="24" class="form">
          <el-form :model="ruleForm" ref="ruleForm" label-width="160px" class="demo-ruleForm">
            <el-col :span="12">
              <el-form-item label="企业名称:">
                <span>{{ ruleForm.company_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="融资金额(万元):">
                <span>{{ ruleForm.money }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人:">
                <span>{{ ruleForm.person }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号:">
                <span>{{ ruleForm.phone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="补充信息:">
                <span>{{ ruleForm.remarks }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="担保方式:">
                <span>{{ ruleForm.ensure_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期望利率范围:">
                <span>{{ `${ruleForm.mongey_min_rate}%~${ruleForm.mongey_max_rate}%` }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期望融资期限(个月):">
                <span>{{ `${ruleForm.claims_min_term}个月~${ruleForm.claims_max_term}个月` }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="金融机构名称:">
                <el-select v-model="ruleForm.jg_id" placeholder="请选择金融机构" @change="jgproListSelect" ref="jgSelect">
                  <el-option v-for="item in jgList" :key="item._id" :label="item.name" :value="item._id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="产品名称:">
                <el-select v-model="ruleForm.jg_pro_id" placeholder="请选择产品" ref="jgproSelect">
                  <el-option v-for="item in jgproList" :key="item._id" :label="item.name" :value="item._id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24" class="clickBtn">
              <el-button @click="submitForm">指派</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-col>

          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import uploadImage from '@/layout/custom/uploadImage.vue';
  /*import uploadFile from '@/layout/custom/uploadFile.vue';*/
  import WangEditor from '@/components/wang-editor.vue';
  import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
  const { mapActions: tNewAssign } = createNamespacedHelpers('tNewAssign');
  const { mapActions: institution } = createNamespacedHelpers('institution');
  const { mapActions: financeclaims } = createNamespacedHelpers('financeclaim');
  import _ from 'lodash';

  export default {
    name: 'tNewAssignForm',
    props: {
      ruleForm: null,
      originalData: null,
      jgList: null,
      jgproList: null,
    },
    components: {
      uploadImage,
      /*uploadFile,*/
      WangEditor,
    },
    data: () => ({
      formTitle: '我要融资指派',
      /*rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        type: [{ required: true }],
        link: [{ required: false }],
        issuing_organ: [{ required: true, message: '请输入发文机关', trigger: 'blur' }],
        subject_classification: [{ required: true }],
        subject_headings: [{ required: true }],
        description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },*/
    }),
    created() {

    },
    mounted(){

    },
    computed: {
    },
    methods: {
      ...tNewAssign(['create', 'delete', 'update', 'fetch', 'originalQuery']),
      jgproListSelect(val) {
        this.$set(this.ruleForm, 'jg_pro_id','');
        this.$emit('jgproListSelect', { jg_id: val })
      },
      async submitForm() {
        console.log(this.$refs['jgSelect'].selectedLabel);
        console.log(this.$refs['jgproSelect'].selectedLabel);
        let temp = JSON.parse(JSON.stringify(this.ruleForm));

        if(temp.is_exist === '1'){
         this.$message.error('已指派！');
         return ;
       }

        const res = await this.originalQuery({ skip:0, limit:1, demand_id: this.ruleForm.demand_id, type: '2'});
        if(res.total === 1){
          this.$message.error('已指派！');
          return ;
        }

        if(temp.jg_id === this.originalData.jg_id && temp.jg_pro_id === this.originalData.jg_pro_id){
          this.$message.error('数据没有变化！');
          return ;
        }

        if(!temp.jg_pro_id){
          this.$message.error('请选择产品！');
          return ;
        }

        temp.institution_name = this.$refs['jgSelect'].selectedLabel;
        temp.product_name = this.$refs['jgproSelect'].selectedLabel
        delete temp._id;
        delete temp.is_exist;
        delete temp.meta;
        delete temp.information;
        this.$emit('submitForm', { data: temp })
      },
      resetForm() {
        this.$emit('resetForm');
      },
      uploadSuccess({ data }) {
        this.$set(this.ruleForm, 'image', data.uri);
      },
      remove(file) {
        this.$set(this.ruleForm, 'image', '')
      },
      uploadFileSuccess({ data,file }) {
        if(_.isArray(this.ruleForm.enclosure)){
          this.$set(this.ruleForm.enclosure, this.ruleForm.enclosure.length,{name:file.name,url:data.uri});
        }else {
          this.$set(this.ruleForm, 'enclosure',[{name:file.name,url:data.uri}]);
        }
      },
      removeFile(file) {
        if(_.isArray(this.ruleForm.enclosure)){
          let temp = this.ruleForm.enclosure.filter((val) => {
            return val.url !== file.url;
          });
          this.$set(this.ruleForm, 'enclosure',temp);
        }else {
          this.$set(this.ruleForm, 'enclosure',[]);
        }
      },
      changeType(value){
        if(value && value === '2'){
          this.$set(this.rules, 'link',[{ required: true }]);
        }else{
          this.$set(this.rules, 'link',[{ required: false }]);
        }
      },
      async checkType(value){
        let res = await this.fetch(value);
        if(res.data.type === '2'){
          this.$set(this.rules, 'link',[{ required: true }]);
        }
      },
      getDate(val) {
        if(val){
          return this.format(new Date(Number(val)),'yyyy年MM月dd');
        }
        return '';
      },
      format(date,formatStr){
        formatStr=formatStr.replace(/yyyy|YYYY/,date.getFullYear());
        formatStr=formatStr.replace(/MM/,(date.getMonth()+1)>9?(date.getMonth()+1).toString():'0' + (date.getMonth()+1));
        formatStr=formatStr.replace(/dd|DD/,date.getDate()>9?date.getDate().toString():'0' + date.getDate());
        return formatStr;
      },
    },
  };
</script>

<style lang="less" scoped>
  .form {
    padding: 0 200px 0 0;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .top .shu {
    float: left;
    width: 4px;
    height: 20px;
    background: rgba(233, 2, 29, 1);
  }

  .top .title {
    float: left;
    padding: 0 10px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(40, 40, 40, 1);
  }

  /deep/ .el-textarea__inner {
    min-height: 100px !important;
  }

  /deep/ .select {
    width: 632px;
  }

  .selects {
    width: 473px;
    margin: 0 15px 0 0;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #e9021d;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #e9021d;
    background: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #e9021d;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button,
  .el-checkbox-button__inner {
    margin: 0 15px 0 0;
  }

  /deep/ .el-checkbox-button__inner {
    padding: 7px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button__inner:hover {
    color: #e9021d;
  }

  /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner {
    border-left: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #e9021d;
    background-color: #ffffff;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
  }

  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: #e9021d;
    background-color: #e9021d;
  }
  /deep/ .el-form-item .el-form-item__label {
    font-size: 16px;
  }
  /deep/ .el-form-item .el-form-item__content {
    font-size: 16px;
  }

  .clickBtn .el-button {
    width: 100px;
    height: 40px;
    padding: 0;
    color: #ffffff;
    background: #b9b9b9;
    border-radius: 4px;
    margin: 40px;
  }

  .clickBtn {
    text-align: center;
    margin: 40px 0;
    border-top: 1px solid #ccc;
  }

  .clickBtn .el-button:first-child {
    background-color: #e9021d;
  }
</style>