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

<template>
  <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="idcard">
                <el-input v-model="form.name" placeholder="请输入身份证号" autocomplete="off"
                          size="small" maxlength="18"
                          show-word-limit></el-input>
              </el-form-item>
            </el-row>
            <el-row type="flex">
              <el-form-item label="性别：" style="width: 100%;" prop="name">
                <el-select placeholder="性别" size="small"  style="width: 100%;"></el-select>
              </el-form-item>
              <el-form-item label="联系电话：" style="width: 100%;" prop="idcard">
                <el-input v-model="form.name" placeholder="请输入联系电话" autocomplete="off"
                          size="small" maxlength="18"
                          show-word-limit></el-input>
              </el-form-item>
            </el-row>
            <el-row type="flex">
              <el-form-item label="出生日期：" style="width: 100%;" prop="name">
                <el-date-picker value-format="yyyy-MM-dd" size="small" placeholder="请选择出生日期" disabled style="width: 100%"></el-date-picker>
              </el-form-item>
              <el-form-item label="年龄：" style="width: 100%;" prop="idcard">
                <el-input v-model="form.name" 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="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="name">
                  <el-select placeholder="请选择经营范围" size="small"  style="width: 100%;"></el-select>
                </el-form-item>
                <el-form-item label="所属片区：" style="width: 100%;" prop="name">
                  <el-select placeholder="请选择所属片区" size="small"  style="width: 100%;"></el-select>
                </el-form-item>
              </div>

              <el-form-item label="" style="width: 100%;" prop="idcard">
                <ai-uploader
                    :instance="instance"
                    isShowTip
                    v-model="form.thumbUrl"
                    :limit="1"
                    :cropOps="cropOps"
                    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="name">
              <el-input v-model="form.code" placeholder="请输入社会统一信用代码" size="small"></el-input>
            </el-form-item>
            <el-form-item label="门店住址：" style="width: 100%;" prop="name">
              <ai-area-select :instance="instance" clearable v-model="form.areaId" always-show @name="v=>form.areaName=v"/>
            </el-form-item>
            <el-form-item label="" style="width:100%">
              <el-input
                  size="small"
                  placeholder="请输入详细地址"
                  clearable
                  v-model="form.householdAddress"
                  maxlength="50"
                  show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="门店描述：" style="width: 100%">
              <el-input v-model="form.desc" 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>
</template>

<script>
export default {
  name: 'Add',

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

  data() {
    return {
      form: {},
      rules: {}
    }
  },


  methods: {
    handleSave(){

    },

    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>