dvcp_v2_webapp/project/sass/apps/Announce/AppAnnounce/components/Add.vue

<template>
  <ai-detail class="AppAnnounceDetail">
    <template slot="title">
      <ai-title :title="id ? '编辑居民群发' : '添加居民群发'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <div class="AppAnnounceDetail-container">
        <el-form ref="form" class="left" :model="form" label-width="110px" label-position="right">
          <ai-card title="基本信息">
            <template #content>
              <div class="ai-form">
                <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                  <el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="id" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
                  <el-input size="small" :disabled="!!id" placeholder="成员唯一标识，设定以后不支持修改" v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, validator: validatorPhone, trigger: 'blur' }]">
                  <el-input size="small" placeholder="请输入手机号" v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="form.gender">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="2">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="座机" prop="telephone">
                  <el-input size="small" placeholder="请输入座机" v-model="form.telephone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input size="small" placeholder="请输入邮箱" v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="地址" style="width: 100%;" prop="address">
                  <el-input size="small" style="width: 100%;" placeholder="请输入地址" v-model="form.address"></el-input>
                </el-form-item>
              </div>
            </template>
          </ai-card>
        </el-form>
        <div class="right"></div>
      </div>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

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

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

    data () {
      const validatorPhone = function (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        info: {},
        department: [],
        validatorPhone: validatorPhone,
        form: {
          position: '',
          name: '',
          email: '',
          telephone: '',
          gender: '',
          mobile: '',
          departmentName: '',
          departmentIds: [],
          tagIds: [],
          id: ''
        },
        id: '',
        tagsList: []
      }
    },

    created () {
      this.getTags()

      if (this.params && this.params.departmentId && !this.params.id) {
        this.department = [{
          id: String(this.params.departmentId),
          name: this.params.departmentName
        }]
        this.form.departmentIds = [this.params.departmentId]
        this.form.departmentName = this.params.departmentName
      }

      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.form = {
              ...res.data,
              departmentName: res.data.departmentNames,
              tagIds: res.data.tags.map(v => v.id),
              departmentIds: res.data.departmentIdsStr.split(',')
            }
          }
        })
      },

      onChange (e) {
        if (e.length) {
          this.form.departmentIds = e.map(v => v.id)
          this.form.departmentName = e.map(v => v.name).join(',')
        } else {
          this.form.departmentIds = ''
          this.form.departmentName = ''
        }
      },

      getTags () {
        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
          if (res.code == 0) {
            this.tagsList = res.data
          }
        })
      },

      onClose () {
        this.form.explain = ''
      },

      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
            this.instance.post(api, {
              ...this.form
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

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

<style scoped lang="scss">
  .AppAnnounceDetail {
    ::v-deep  .ai-detail__content {
      .ai-detail__content--wrapper {
        position: relative;
        max-width: 100%;
        margin: 0;
        height: 100%;
        overflow: hidden;
      }
    }

    .AppAnnounceDetail-container {
      display: flex;
      position: relative;
      height: 100%;
      padding: 0 20px;
      overflow-y: overlay;

      .left {
        flex: 1;
        margin-right: 20px;
      }

      .right {
        position: sticky;
        top: 0;
        width: 400px;
        height: 90%;
        background: red;
      }
    }
  }
</style>