dvcp_v2_webapp/project/fengdu/AppOutSource/AppArchives/components/Add.vue

<template>
  <div>
    <ai-detail class="add">
      <template slot="title">
        <ai-title title="添加档案" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
      </template>
      <template slot="content">
        <el-form class="content-right" :model="form" ref="ruleForm" :rules="rules" label-width="130px"
                 label-position="right" size="small">

          <ai-card title="基本信息">
            <template #content>
              <el-row type="flex">
                <el-form-item label="经营者姓名：" style="width: 100%;" prop="name">
                  <el-input v-model="form.name" placeholder="请输入姓名" autocomplete="off"
                            size="small" maxlength="20"
                            show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" style="width: 100%;" prop="idNumber">
                  <ai-id v-model="form.idNumber" @change="getInfoByIdNumber" placeholder="请输入身份证号"/>
                </el-form-item>
              </el-row>
              <el-row type="flex">
                <el-form-item label="性别：" style="width: 100%;" prop="sex">
                  <ai-select
                      v-model="form.sex"
                      style="width: 100%;"
                      placeholder="性别"
                      :selectList="$dict.getDict('sex')">
                  </ai-select>
                </el-form-item>
                <el-form-item label="联系电话：" v-model="form.phone" style="width: 100%;" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入联系电话" autocomplete="off"
                            size="small" maxlength="11"
                            show-word-limit></el-input>
                </el-form-item>
              </el-row>
              <el-row type="flex">
                <el-form-item label="出生日期：" style="width: 100%;" prop="birthday">
                  <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="form.birthday"
                                  placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
                </el-form-item>
                <el-form-item label="年龄：" style="width: 100%;" prop="age">
                  <el-input v-model="form.age" placeholder="请输入年龄" disabled autocomplete="off"
                            size="small"></el-input>
                </el-form-item>
              </el-row>
            </template>
          </ai-card>
          <ai-card title="门店信息">
            <template #content>
              <el-row type="flex">
                <div class="flex-colum">
                  <el-form-item label="门店名称：" style="width: 100%;" prop="shopName">
                    <el-input v-model="form.shopName" placeholder="请输入姓名" autocomplete="off"
                              size="small" maxlength="20"
                              show-word-limit></el-input>
                  </el-form-item>
                  <el-form-item label="经营类型：" style="width: 100%;" prop="operatorType">
                    <ai-select
                        v-model="form.operatorType"
                        placeholder="请选择经营范围"
                        :selectList="$dict.getDict('operatorType')" style="width: 100%;">
                    </ai-select>
                  </el-form-item>
                  <el-form-item label="所属片区：" style="width: 100%;" prop="girdCode">
                    <el-input disabled v-model="form.girdName" size="small" placeholder="请选择片区">
                      <template slot="append">
                        <el-button size="small" @click="dialog=true">选择片区</el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </div>

                <el-form-item label="门店照片" style="width: 100%;" prop="fileUrl">
                  <ai-uploader
                      :instance="instance"
                      isShowTip
                      v-model="form.fileUrl"
                      :limit="1"
                      is-crop>
                    <template slot="tips">
                      <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                      <p>图片比例：1.6：1</p>
                    </template>
                  </ai-uploader>
                </el-form-item>
              </el-row>
              <el-form-item label="社会信用代码：" style="width: 100%;" prop="creditCode">
                <el-input v-model="form.creditCode" placeholder="请输入社会统一信用代码" size="small"></el-input>
              </el-form-item>
              <el-form-item label="门店住址：" style="width: 100%;" prop="areaId">
                <ai-area-select :instance="instance" clearable always-show
                                @name="v=>form.areaName=v" v-model="form.areaId"/>
              </el-form-item>
              <el-form-item label="" style="width:100%" prop="address">
                <el-input
                    size="small"
                    placeholder="请输入详细地址"
                    clearable
                    v-model="form.address"
                    maxlength="50"
                    show-word-limit
                ></el-input>
              </el-form-item>
              <el-form-item label="门店描述：" style="width: 100%" prop="description">
                <el-input v-model="form.description" placeholder="请输入门店描述" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </ai-detail>
    <ai-dialog title="选择片区" :visible.sync="dialog" :customFooter="true" border width="720px">
      <div class="grid">
        <el-tree
            :data="treeList"
            :props="defaultProps"
            node-key="id"
            ref="treeRef"
            :check-strictly="true"
            show-checkbox
            :default-expanded-keys="currCheckedKeys"
            :default-checked-keys="currCheckedKeys"
            @check-change="handleCheckChange"
            @check="onCheckChange">
        </el-tree>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button size="medium" @click="dialog=false">取消</el-button>
        <el-button type="primary" size="medium" @click="getCheckedTree">确认</el-button>
      </div>
    </ai-dialog>
  </div>
</template>

<script>
import {ID} from "dui/lib/js/utils";

export default {
  name: 'Add',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      form: {
        id: null,
        areaId: '',
        girdCode: '',
        girdName: '',
        name: '',
        idNumber: '',
        sex: '',
        phone: '',
        birthday: '',
        age: '',
        fileUrl:[],
        girdInfoList: []
      },
      currCheckedKeys: [],
      dialog: false,
      treeList: [],
      treeArray:[],
      treeObj: {
        checkedKeys: [],
      },
      defaultExpandedKeys: [],
      defaultProps: {
        children: "children",
        label: "girdName",
      },
    }
  },

  computed:{
    rules(){
      const IdNumberPass = (rule, value, callback) => {
        if (value) {
          if (ID.check(value)) {
            callback();
          } else {
            callback(new Error("身份证号格式错误"));
          }
        }
        // else {
        //   callback(new Error("请输入身份证号"));
        // }
      };
      return {
        name: [{required: true, message: '请输入经营者姓名', trigger: 'blur'}],
        idNumber: [{required: false, validator: IdNumberPass, trigger: 'change'}],
        sex: [{required: false, message: '请选择性别', trigger: 'change'}],
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        shopName: [{required: true, message: '请输入门店名称', trigger: 'blur'}],
        operatorType: [{required: true, message: '请选择经营者类型', trigger: 'change'}],
        girdCode: [{required: true, message: '请选择所属片区', trigger: 'change'}],
        fileUrl: [{required: false, message: '请选择门店照片', trigger: 'change'}],
        areaId: [{required: false, message: '请选择门店住址', trigger: 'change'}],
      }
    }
  },

  created() {
    this.beforeSelectTree()
    this.form.areaId = this.$store.state.user.info.areaId
    this.$dict.load('sex', 'operatorType')

    if (this.params.id) {
      this.getDetail(this.params);
    }
  },


  methods: {
    getInfoByIdNumber(code) {
      if (ID.check(code)) {
        let info = new ID(code)
        this.form.age = info.age
        this.form.birthday = info.birthday
        this.$forceUpdate()
      }
    },
    beforeSelectTree() {
      this.treeObj.checkedKeys = [];
      this.instance.post(`/app/appgirdinfo/listAll3`, null, null).then((res) => {
        if (res.code == 0) {
          this.treeArray = res.data
          this.form.girdInfoList.map((e) => {
            this.treeObj.checkedKeys.push(e.id);
          });

          this.treeList = res.data.filter(e => !e.parentGirdId)
          const parentGirdId = this.treeList[0].id

          this.treeList.map(p => this.addChild(p, res.data.map(v => {
            if (v.id === parentGirdId) {
              this.defaultExpandedKeys.push(v.id)
            }

            return {
              ...v
            }
          }), {
            parent: 'parentGirdId'
          }))
        }
      });
    },
    async getDetail({id}) {
      try {
        const {code, data} = await this.instance.post('/app/appshoparchives/queryDetailById', null, {
          params: {
            id
          }
        })
        if (code === 0) {
          this.form = {...data,girdInfoList:[]}
          this.form.fileUrl = [{
            url: data.fileUrl
          }]
          const target = this.treeArray?.find(v=>v.girdCode === data.girdCode)
          this.currCheckedKeys = [target.id]
        }
      } catch (e) {
        console.error(e)
      }
    },

    getCheckedTree() {
      const nodes = this.$refs.treeRef.getCheckedNodes()
      if (!nodes.length) {
        return this.$message.error('请选择网格')
      }

      this.currCheckedKeys = [nodes[0]?.id]
      this.form.girdCode = nodes[0]?.girdCode
      this.form.girdName = nodes[0]?.girdName
      this.dialog = false;
    },

    handleCheckChange(data, checked){
      if (checked) {
        this.$refs.treeRef.setCheckedKeys([data.id])
      }
    },

    onCheckChange(e) {
      if(e.children && e.children.length>0){
        this.$refs.treeRef.setCheckedKeys([]);
      }
    },


    async addOrUpdate() {
      try {
        const {code} = await this.instance.post(`/app/appshoparchives/addOrUpdate`,{
          ...this.form,
          fileId:this.form.fileUrl[0]?.id,
          fileUrl:this.form.fileUrl[0]?.path,
        })
        if (code === 0) {
          this.$message.success('保存成功');
          this.cancel()
        }
      } catch (e) {
        console.error(e)
      }
    },

    handleSave() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.addOrUpdate()
        }
      })
    },

    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add {

  .flex-colum {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .file-item {
      width: 118px;
      height: 118px;
      margin: 0 20px 20px 0;

      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img {
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>