supplier_system/src/dashoo.cn/frontend_web/src/components/oilsupplierstore/basisinfo.vue

<template>
  <div>
    <el-form class="formDataInfo" label-width="137px" ref="EntityForm" :model="formData" :rules="rulesform">
      <el-row>
        <el-col :span="16">
          <el-form-item label="供方名称" prop="SupplierName">
            <el-input v-model="formData.SupplierName" :maxlength="255" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="准入编码">
            <el-input v-model="formData.AccessCardNo" readonly placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="单位关系">
            <el-select ref="SpecType" v-model="formData.SpecTypeCode"  @change="currentSel"
                       placeholder="请选择" style="width: 100%">
              <el-option v-for="item in UnitRelationOptions" :key="item.Id" :label="item.Key" :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="国家" prop="Country">
            <el-select v-model="formData.Country"
                       filterable
                       placeholder="请选择"
                       style="width: 100%">
              <el-option v-for="item in countryListOptions"
                         :key="item.key"
                         :label="item.value"
                         :value="item.value">
                <span style="float: left">{{ item.value }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="准入方式">
            <el-select ref="SpecType" v-model="formData.InStyle"
                       placeholder="请选择" style="width: 100%">
              <el-option v-for="item in InOptions" :key="item.Id" :label="item.Key" :value="item.Value" v-if="item.Value != '2' && item.Value != '3'">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效期">
            <el-date-picker
              v-model="formData.ApplyTime"
              :disabled="this.formData.Status == '8'"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="选择有效期"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件合一">
            <el-select v-model="formData.CredentialFlag" placeholder="请选择"  @change="showorhid"  style="width: 100%">
              <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="统一社会信用代码" prop="CommercialNo">
            <el-input v-model="formData.CommercialNo" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="税务登记证编号" prop="CountryTaxNo" v-if="showorhidflag=='show'">
            <el-input v-model="formData.CountryTaxNo" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="组织机构代码" prop="OrganCode" v-if="showorhidflag=='show'">
            <el-input v-model="formData.OrganCode" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="注册地址" prop="Province">
            <el-row>
              <el-col :span="10">
                <el-cascader ref="cascaderAdd" :options="countryoptions" :props="countryprops"
                             placeholder="省市区" v-model="CityAry" style="width: 100%" filterable
                             @change="handleAreaChange"></el-cascader>
              </el-col>
              <el-col :span="14">
                <el-input v-model="formData.Address" props="Address" maxlength="500" placeholder="详细地址" style="width: 100%">
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="ZipCode">
            <el-input v-model="formData.ZipCode" maxlength="20" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="通信地址" prop="LinkProvince">
            <el-row>
              <el-col :span="10">
                <el-cascader ref="cascaderAddrLink" :options="countryoptions" :props="countryprops"
                             placeholder="省市区" v-model="LinkCityAry" style="width: 100%" filterable
                             @change="handleLinkAreaChange">
                </el-cascader>
              </el-col>
              <el-col :span="14">
                <el-input v-model="formData.LinkAddress" props="LinkAddress" maxlength="500" placeholder="详细地址"
                          style="width: 100%">
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="LinkZipCode">
            <el-input v-model="formData.LinkZipCode" maxlength="20" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="法定代表人姓名" prop="LegalPerson">
            <el-input v-model="formData.LegalPerson" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="公司类型" prop="CompanyType">
            <el-select v-model="formData.CompanyType" maxlength="50" filterable allow-create
                        placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in CompanyTypeOptions" :key="item.Id" :label="item.Key" :value="item.Value"
                         style="width: 100%">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="成立时间" prop="SetupTime">
            <el-date-picker v-model="formData.SetupTime" type="date" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="注册资本" prop="RegCapital">
            <el-input type="number" v-model="formData.RegCapital"  placeholder="请输入" style="width: 100%">
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="币种">
            <el-select v-model="formData.Currency"  placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in CurrencyOptions" :key="item.Value" :label="item.Key" :value="item.Value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="开户银行" prop="DepositBank">
            <el-input v-model="formData.DepositBank" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="联系人姓名" prop="ContactName">
            <el-input v-model="formData.ContactName" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="移动电话" prop="Mobile">
            <el-input v-model="formData.Mobile" maxlength="20" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="银行账号" prop="BankAccount">
            <el-input v-model="formData.BankAccount" maxlength="50" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="固定电话" prop="Telphone">
            <el-input v-model="formData.Telphone" maxlength="20" placeholder="区号-0000000" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="传真" prop="Fax">
            <el-input v-model="formData.Fax" maxlength="20" placeholder="区号-0000000" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="财务电话" prop="CompanyTel">
            <el-input v-model="formData.CompanyTel" placeholder="请输入" maxlength="20" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮箱" prop="EMail">
            <el-input v-model="formData.EMail" maxlength="50" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="银行信用等级">
            <el-input v-model="formData.BankCreditRating" maxlength="10" placeholder="请输入" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <!--<el-col :span="8">
          <el-form-item label="公司网址">
            <el-input v-model="formData.CompanyUrl" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label="进津备案通知书">
            <el-input v-model="formData.TjinNotify" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="HSE审查培训">
            <!--<el-input v-model="formData.HseTraining" placeholder="请输入" style="width: 100%"></el-input>-->
            <el-select v-model="formData.HseTraining" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in HSEOptions" :key="item.value" :label="item.label" :value="item.value"
                         style="width: 100%">
              </el-option>
            </el-select>

          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <el-form class="formDataInfo" label-position="top" ref="EntityFormCert" :rules="rulesform" :model="formData" :disabled="disabled">
      <el-row :gutter="60">
        <el-col :span="8">
          <el-form-item label="质量管理体系认证证书编号">
            <el-input v-model="formData.QualitySystemCert" maxlength="200" placeholder="请输入" type="textarea"
                      style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="企业资质证书(编号  级别)">
            <el-input v-model="formData.QualifCert" placeholder="请输入" maxlength="200" type="textarea"
                      style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
        <!--<el-col :span="12">
          <el-form-item label="企业资质证书级别">
            <el-input v-model="formData.QualifCertLevel" placeholder="请输入"  style="width: 100%"></el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label="安全生产许可证证书编号">
            <el-input v-model="formData.SafetyLicense" maxlength="200" placeholder="请输入" type="textarea"
                      style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="行业特殊要求的认证证书编号">
            <el-input v-model="formData.SpecIndustryCert" placeholder="请输入" maxlength="200" type="textarea"
                      style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="营业范围" prop="BusinessScope">
            <el-input v-model="formData.BusinessScope" maxlength="200" placeholder="营业执照上的信息" type="textarea"
                      style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="formData.Remark1" maxlength="500" placeholder="请输入" type="textarea" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="其他备注">-->
<!--            <el-input v-model="formData.Remark1"-->
<!--                      maxlength="500"-->
<!--                      placeholder="请输入"-->
<!--                      type="textarea"-->
<!--                      style="width: 100%">-->
<!--            </el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>

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

<script>
  export default {
    name: 'basisinfo',
    props: {
      formData: {
        type: Object,
        default: {}
      },
      dictData: {
        type: Object,
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      },
      authUser: {
        type: Object,
        default: null
      }
    },

    data () {
      var checkemail = (rule, value, callback) => {
        if (value) {
          let re = /^([a-zA-Z0-9]+[_|-|.|-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.|-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的邮箱地址'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      var checkCommercialNo = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入统一社会信用代码'))
        } else {
          if (this.showorhidflag == 'hid') {
            let re = /^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g
            if (!re.test(value)) {
              callback(new Error('请输入正确的统一社会信用代码'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      }
      // 查找是否有公司信息，若有则补全信息。
      var checkSupplierName = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入供方名称'))
        } else {
          callback()
        }
      }
      // 检查邮编格式
      var checkZipCode = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入邮编'))
        } else {
          let re = /^[0-9]{6}$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的邮编'))
          } else {
            callback()
          }
        }
      }
      // 检查手机号
      var checkMobile = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入手机号码'))
        } else {
          let re = /^1[3456789]\d{9}$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的手机号码'))
          } else {
            callback()
          }
        }
      }

      // 固话检验
      var checkTelphone = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入固话号码'))
        } else {
          let re = /^((0\d{2,3}-\d{7,8})|(1[35874]\d{9}))$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的固话格式为：区号-0000000'))
          } else {
            callback()
          }
        }
      }
      // 注册资金限制
      var checkMoney = (rule, value, callback) => {
        if (value < 0) {
          callback(new Error('注册资金不能小于0'))
        } else {
          callback()
        }
      }
      // 传真检验
      var checkFax = (rule, value, callback) => {
        if (!value) {
          callback()
        } else {
          let re = /^((0\d{2,3}-\d{7,8})|(1[35874]\d{9}))$/
          if (!re.test(value)) {
            callback(new Error('请输入正确的传真格式为：区号-0000000'))
          } else {
            callback()
          }
        }
      }
      var checkBankAccount = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入银行账号'))
        } else {
          if (value.length < 9) {
            callback(new Error('请填写正确位数的银行账号'))
          } else {
            callback()
          }
        }
      }
      return {
        showorhidflag: 'hid',
        selectoptions: [{
          value: '1',
          label: '三证合一'
        }, {
          value: '2',
          label: '五证合一'
        }, {
          value: '3',
          label: '常规'
        }],
        address: [],
        linkaddress: [],
        companyReadonly: false,
        companynames: [],
        UnitRelationOptions: [],
        InOptions: [],
        CompanyTypeOptions: [],
        CurrencyOptions: [],
        UnitRelationAry: [],
        countryoptions: [],
        countryprops: {
          value: 'adcode',
          label: 'name',
          children: 'districts'
        },
        CityAry: [],
        LinkCityAry: [],
        HSEOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        countryListOptions: [],
        rulesform: {
          BusinessScope: [{
            required: true,
            message: '请输入营业范围',
            trigger: 'change'
          }],
          Country: [{
            required: true,
            message: '请输入国家',
            trigger: 'change'
          }],
          SupplierName: [{
            required: true,
            validator: checkSupplierName,
            trigger: 'change'
          } ],
          CommercialNo: [{
            required: true,
            validator: checkCommercialNo,
            trigger: 'change'
          } ],
          CountryTaxNo: [{
            required: true,
            message: '请输入税务登记证编号',
            trigger: 'change'
          }],
          CompanyType: [{
            required: true,
            message: '请选择公司类型',
            trigger: 'change'
          } ],
          LegalPerson: [{
            required: true,
            message: '请输入法定代表人姓名',
            trigger: 'change'
          } ],
          Province: [{
            required: true,
            message: '请选择省市区',
            trigger: 'blur'
          } ],
          Address: [{
            required: true,
            message: '请输入注册地址',
            trigger: 'change'
          } ],
          EMail: [{
            required: false,
            validator: checkemail,
            trigger: 'change'
          }],
          OrganCode: [{
            required: true,
            message: '请输入组织机构代码',
            trigger: 'change'
          } ],

          RegCapital: [
            {required: true, validator: checkMoney, trigger: 'change'}
          ],
          DepositBank: [{
            required: true,
            message: '请输入开户银行',
            trigger: 'change'
          } ],
          BankAccount: [{
            required: true,
            validator: checkBankAccount,
            trigger: 'change'
          } ],
          ContactName: [{
            required: true,
            message: '请输入联系人姓名',
            trigger: 'change'
          } ],
          Mobile: [{
            required: true,
            validator: checkMobile,
            trigger: 'change'
          } ],

          Telphone: [{
            required: true,
            validator: checkTelphone,
            trigger: 'blur'
          } ],
          SetupTime: [{
            required: true,
            message: '请输入成立时间',
            trigger: 'change'
          }],
          Fax: [{
            required: false,
            validator: checkFax,
            trigger: 'blur'
          } ],

          CompanyTel: [{
            required: true,
            message: '请输入财务电话',
            trigger: 'change'
          } ],
          ZipCode: [{
            required: true,
            validator: checkZipCode,
            trigger: 'change'
          }],
          LinkZipCode: [{
            required: true,
            validator: checkZipCode,
            trigger: 'change'
          }],
          LinkProvince: [{
            required: true,
            message: '请选择省市区',
            trigger: 'blur'
          } ],
          LinkAddress: [{
            required: true,
            message: '请输入通信地址',
            trigger: 'change'
          } ],
          realname: [{
            required: true,
            message: '用户名',
            trigger: 'blur'
          }]
        }
      }
    },
    created () {
      //   if(this.authUser && this.authUser.Profile.IsCompanyUser === 1){
      //   this.inputCompanyName(this.authUser.Profile.Realname)
      // }
    },
    watch: {
      dictData: {
        handler (newName, oldName) {
          this.getDictOptions()
        },
        immediate: true
      }
    },
    methods: {
      getCountryList (val) {
        let tmpJson = JSON.parse(val)
        this.countryListOptions = []
        for (let idx in tmpJson) {
          this.countryListOptions.push({
            label: tmpJson[idx].split('-')[0],
            value: tmpJson[idx].split('-')[1],
            code: tmpJson[idx].split('-')[2],
            key: tmpJson[idx]
          })
        }
      },
      showorhid (val) {
        if (val === '1' || val === '2') {
          this.showorhidflag = 'hid'
          this.formData.OrganCode = ''
          this.formData.CountryTaxNo = ''
        } else {
          if (this.formData.CommercialNo !== '') {
            this.formData.OrganCode = this.formData.CommercialNo
            this.formData.CountryTaxNo = this.formData.CommercialNo
          }
          this.showorhidflag = 'show'
        }
      },
      currentSel (event) {
        if (event === 2) {
          this.formData.InStyle = '5'
          // for(let item of this.$refs.inStyle.options) {
          //   if(item.value=='5'){
          //       console.log(item.style)
          //   }else{
          //      //隐藏
          //   }
          // }
        } else {
          this.formData.InStyle = '1'
        }
      },
      getDictOptions () {
        if (this.dictData) {
          this.UnitRelationOptions = this.dictData['UnitRelation']
          this.InOptions = this.dictData['InOptions']
          this.getCityList(this.dictData['GaodeMapChinaAreas'])
          this.CompanyTypeOptions = this.dictData['CompanyType']
          this.CurrencyOptions = this.dictData['CurrencyType']
          this.getCountryList(this.dictData['CountryList'])
        }
      },
      getCityList (val) {
        let resultData = JSON.parse(val)
        let countstr = JSON.stringify(resultData.districts[0].districts)
        countstr = countstr.replace(/\,\"districts\"\:\[\]/g, '')
        this.countryoptions = JSON.parse(countstr)
      },
      unitRelationChange (value) {
        this.formData.SpecTypeCode = value.join(',')
      },
      handleAreaChange (value) {
        this.formData.Province = value[0]
        this.formData.City = value[1]
        this.formData.Street = value[2]
        // this.formData.ZipCode = value[2]
        this.address = this.$refs['cascaderAdd'].currentLabels
        this.formData.AllAddress = this.address[0] + '/' + this.address[1] + '/' + this.address[2]
      },
      handleLinkAreaChange (value) {
        this.formData.LinkProvince = value[0]
        this.formData.LinkCity = value[1]
        this.formData.LinkStreet = value[2]
        // this.formData.LinkZipCode = value[2]
        this.linkaddress = this.$refs['cascaderAddrLink'].currentLabels
        this.formData.LinkAllAddress = this.linkaddress[0] + '/' + this.linkaddress[1] + '/' + this.linkaddress[2]
      },

      formatDateTime (date) {
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        m = m < 10 ? ('0' + m) : m
        var d = date.getDate()
        d = d < 10 ? ('0' + d) : d
        var h = date.getHours()
        var minute = date.getMinutes()
        minute = minute < 10 ? ('0' + minute) : minute
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      }
    }
  }
</script>
<style>
  .formDataInfo .el-input__inner[readonly]{
    border-color:#DCDFE6;
  }
  .formDataInfo .el-input__inner[readonly]:focus{
    border-color:#DCDFE6;
  }
  .formDataInfo .el-textarea__inner[readonly]{
    border-color:#DCDFE6;
  }
  .formDataInfo .el-textarea__inner[readonly]:focus{
    border-color:#DCDFE6;
  }
  .formDataInfo .el-input__inner[disabled]{
    color:black;
    opacity: 1;
    background-color: white;
  }
  .formDataInfo .el-textarea__inner[disabled]{
    color:black;
    opacity: 1;
    background-color: white;
  }

</style>