admin-web-master/src/components/add/addss.vue

<template>
  <div>
    <el-form :model="formInline" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formInline.username" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formInline.phone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="formInline.sex" placeholder="请选择" style="width: 100%;">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formInline.email" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="身份证类型" prop="idCardType">
        <el-select v-model="formInline.idCardType" placeholder="请选择" style="width: 100%;">
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="护照" value="护照"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCardNumber">
        <el-input v-model="formInline.idCardNumber" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="身份证正面图片" prop="idCardFrontImage">
        <el-upload :action="$baseURL" class="avatar-uploader" :auto-upload="false" :show-file-list="false"
          :on-remove="hefuRemove('idCardFrontImage')" :on-change="(e) => hefuSuccess(e, 'idCardFrontImage')">
          <img v-if="formInline.idCardFrontImage" :src="$baseURL+formInline.idCardFrontImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="身份证背面图片" prop="idCardBackImage">
        <el-upload :action="$baseURL" class="avatar-uploader" :auto-upload="false" :show-file-list="false"
          :on-remove="hefuRemove('idCardBackImage')" :on-change="(e) => hefuSuccess(e, 'idCardBackImage')">
          <img v-if="formInline.idCardBackImage" :src="$baseURL+formInline.idCardBackImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="审核状态" prop="checkState">
        <el-input v-model="formInline.checkState" placeholder="请输入"></el-input>
      </el-form-item> -->
      <!-- 按钮 -->
      <el-form-item>
        <div style="margin-top: 20px">
          <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
          <el-button @click="close()" class="buttonHover"
            style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {
    businessListGetAll
  } from '@/api/business'
  import {
    getAlls,
    changAlls
  } from '@/api/information.js'
  import {
    getAlls as map1
  } from '@/api/map1.js'
  import {
    miniioupload
  } from '@/api/commodityLease.js'
  import {
    cerePlatformMerchantadd
  } from '@/api/newly.js'
  export default {
    data() {
      return {
        AddData: [], // 最后资源
        multipleSelection: [], // 资源
        addMing: false,
        ziyuanData: [],
        shopId: null,
        hefuData: [], // 合同附件
        shopList: [],
        formInline: {
          username: '',
          name: '',
          avatar: '',
          phone: '',
          sex: '',
          email: '',
          token: '',
          idCardType: '',
          idCardNumber: '',
          idCardFrontImage: '',
          idCardBackImage: '',
          checkState: '',
          checkOpinion: '',
          checker: '',
          applyTime: '',
          state: '',
        },
        rulesHetong: {
          // ... 其他规则
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          idCardType: [{
            required: true,
            message: '请输入身份证类型',
            trigger: 'blur'
          }],
          idCardNumber: [{
            required: true,
            message: '请输入身份证号码',
            trigger: 'blur'
          }],
          idCardFrontImage: [{
            required: true,
            message: '请输入身份证正面图片',
            trigger: 'blur'
          }],
          idCardBackImage: [{
            required: true,
            message: '请输入身份证背面图片',
            trigger: 'blur'
          }],
        },
        shopfrom: {
          shopName: '', // 店铺名称
          shopCode: '', // 店铺编码
          chargePersonName: '', // 店铺负责人
          contractState: '1', // 合同状态 1-有效 0-无效
          page: '1', // 当前页
          pageSize: '1000' // 每页记录数
        },
        pageindex: {
          pageNumber: 1,
          pageSize: 10,
        },
        uploadFiles: [],
        filesLength: 1
      };
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    created() {
      businessListGetAll(this.shopfrom).then(res => {
        this.shopList = res.data.list
        console.error(this.shopList)
      })
    },
    methods: {
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      add() {
        console.log({
          ...this.formInline
        })
        this.$refs.heForm.validate((valid) => {
          if (valid) {
            cerePlatformMerchantadd({
              ...this.formInline,
              checkState: '2',
              applyTime: this.updateCurrentTime()
            }).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.$emit('removeonaction', '1')
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: '请填写完整信息',
              type: 'error'
            })
            return false;
          }
        })
      },
      close() {
        this.$emit('removeonaction', '1')
      },
      MingDelete(item) {
        this.AddData.splice(item, 1);
      },
      async mingShow() {
        const ziyuan = await getAlls(this.pageindex)
        const ggw = await map1(this.pageindex)
        const changdi = await changAlls(this.pageindex)
        this.ziyuanData = [...ziyuan.data.content, ...ggw.data.content, ...changdi.data.content]
        this.addMing = true
      },
      handleSelectionChange(selection) {
        this.multipleSelection = [selection]
      },
      minSev() {
        const filteredAddData = this.AddData.filter(itemAdd => !this.multipleSelection.some(itemMultiple =>
          itemMultiple
          .id === itemAdd.id));
        this.AddData = filteredAddData.concat(this.multipleSelection)
        this.addMing = false
        this.multipleSelection = []
      },
      mingClose() {
        this.multipleSelection = []
        this.ziyuanData = []
        this.addMing = false
      },
      changeRelatedMerchants(e) {
        this.shopId = this.shopList[e].shopId
        this.formInline.tenantName = this.shopList[e].chargePersonName
        this.formInline.tenantTelephone = this.shopList[e].shopPhone
      },
      hefuRemove(e) {
        // this.formInline[e] = ''
      },
      hefuSuccess(response, e) {
        console.error(response)
        console.error(e)
        this.formInline[e] = ''
        let fd = new FormData()
        fd.append('file', response.raw)
        fd.append('filePath', 'yh')
        miniioupload(fd).then(res => {
          console.error(res)
          this.formInline[e] = res.data
        })
      }
    }
  };
</script>
<style lang="css">
  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }
  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #3F9B6A;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #3F9B6A;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>