dvcp_v2_wxcp_app/library/apps/AppWalkask/add.vue

<template>
  <div class="add">
    <div v-if="addList">
      <div class="header-description">
        <u-form :model="forms" ref="uForm" label-width="auto">
          <u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
            <AiAreaPicker :value="forms.areaId" :areaId="areaIdProps" @select="areaSelect" isForm/>
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="走访对象" prop="name" required :right-icon="id ? '' : 'arrow-right'"
                       class="create_user_names">
            <u-input v-model="forms.name" disabled placeholder="请选择走访对象" @click="toWalkObject"/>
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="走访时间" prop="visitTime" required :right-icon="id ? '' : 'arrow-right'" class="realitys">
            <u-input v-model="forms.visitTime" disabled placeholder="请选择走访时间" @click="showVisitTime = true"/>

            <u-picker v-model="showVisitTime" :params="params" mode="time" @confirm="change"></u-picker>
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="现实状态" prop="reality" :right-icon="id ? '' : 'arrow-right'" class="realitys">
            <u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="realityClick"/>

            <u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue"
                      label-name="dictName" @confirm="realityStstus"></u-select>
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="入户走访事项" prop="title" required label-position="top" :border-bottom="false">
            <u-input v-model="forms.title" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60"
                     :maxlength="30"/>
          </u-form-item>
          <div class="hint">{{ forms.title.length }}/30</div>

          <div class="line"></div>

          <u-form-item label="入户走访内容" prop="description" label-position="top" :border-bottom="false">
            <u-input v-model="forms.description" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60"
                     :maxlength="500"/>
          </u-form-item>
          <div class="hint">{{ forms.description.length }}/500</div>

          <div class="line"></div>

          <u-form-item label="图片(最多9张)" prop="images" class="avatars" label-position="top" :border-bottom="false">
            <AiUploader :def.sync="forms.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"
                        sourceType="camera"></AiUploader>
          </u-form-item>
        </u-form>
      </div>

      <div class="btn" @click="submit">保存</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'add',
  props: {},
  data() {
    return {
      show: false,
      forms: {
        areaId: '',
        areaName: '',

        optionId: '',
        name: '',

        reality: '',
        realityValue: '',
        menuLevel3Name: '',
        applicationId: '',
        title: '',
        description: '',
        images: [],
      },
      showAreaId: false,
      showStstus: false,
      flag: false,
      addList: true,
      areaIdProps: '',
      clickedUserSelect: false,
      id: '',

      name: '',
      optionId: '',
      showVisitTime: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
    }
  },
  computed: {...mapState(['user'])},
  onLoad(o) {
    this.id = o.id ? o.id : ''
    this.areaIdProps = this.user.areaId
    if (!this.id) {
      this.forms.areaId = this.user.areaId
    }
    this.$dict.load('realityStatus').then(() => {
      this.getDetail()
    })

    uni.$on('goBack', (data) => {
      this.forms.menuLevel3Name = data.applicationName
      this.forms.applicationId = data.applicationId
      this.forms.name = data.selectUser.name
      this.forms.optionId = data.selectUser.id
    })
  },
  onShow() {
    document.title = '新建走访'
  },
  methods: {
    realityClick() {
      if (this.id) return
      if (!this.forms.name) {
        return this.$u.toast('请选择走访对象')
      }
      this.showStstus = true
    },

    getDetail() {
      if (this.id) {
        this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
          if (res?.data) {
            this.forms = res.data
            this.forms.create_user_name = res.data.name
            this.forms.realityValue = res.data.reality
            this.forms.areaId = res.data.areaId
            this.forms.areaName = res.data.areaName
            this.forms.reality = this.$dict.getLabel('realityStatus', res.data.reality)
            if (res.data.images) {
              this.forms.images = JSON.parse(res.data.images || '[]')
            }
          }
        })
      }
    },

    submit() {
      if (this.flag) return

      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.forms.name) {
            return this.$u.toast('请选择走访对象')
          }
          if (!this.forms.visitTime) {
            return this.$u.toast('请选择走访时间')
          }
          if (!this.forms.title) {
            return this.$u.toast('请输入入户走访事项')
          }

          const imgs = []
          if (this.forms.images) {
            this.forms.images.map((e) => {
              imgs.push({url: e.url, id: e.id})
            })
          }

          this.flag = true
          this.$http
          .post(`/app/appvisitvondolence/addOrUpdate`, {
            areaId: this.forms.areaId,
            name: this.forms.name,
            visitTime: this.forms.visitTime,
            optionId: this.forms.optionId,
            // menuLevel3Name: this.forms.menuLevel3Name,
            applicationId: this.forms.applicationId,

            reality: this.forms.realityValue ? this.forms.realityValue : this.forms.reality,
            title: this.forms.title,
            description: this.forms.description,
            createUserId: this.user.id,
            createUserName: this.user.name,
            images: JSON.stringify(imgs) || [],
            id: this.id,
          })
          .then((res) => {
            if (res.code == 0) {
              this.$u.toast('保存成功')
              this.flag = false
              uni.$emit('updateList')
              setTimeout(() => {
                uni.navigateBack()
              }, 600)
            }
          })
        } else {
          this.$u.toast('保存失败')
        }
      })
    },

    areaSelect(e) {
      this.forms.areaId = e
    },

    change(e) {
      this.forms.visitTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
    },

    realityStstus(e) {
      this.forms.reality = e[0].label
      this.forms.realityValue = e[0].value
    },

    toWalkObject() {
      uni.navigateTo({url: `./selectType`})
    },
  },
}
</script>

<style lang="scss" scoped>
.add {
  height: 100%;
  background: #f3f6f9;

  .header-description {
    padding-bottom: 162px;
    background: #f3f6f9;

    ::v-deep .u-form {
      background: #fff;

      .u-form-item {
        .u-form-item__body {
          .u-form-item--right__content__slot {
            padding-bottom: 0;
          }
        }
      }

      .u-form-item:last-child {
        margin-bottom: 0;
        padding-bottom: 20px !important;
      }

      .areaIds {
        .u-form-item__body {
          .u-form-item--right {
            .u-form-item--right__content {
              .u-form-item--right__content__slot {
                .AiAreaPicker {
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;

                  .AiSearchPopup {
                    .areaSelector {
                      .location {
                        opacity: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .create_user_names,
      .realitys {
        .u-form-item__body {
          .u-form-item--right__content__slot {
            .u-input {
              text-align: right !important;
            }
          }
        }
      }

      .line {
        height: 16px;
        background: #f3f6f9;
      }

      .hint {
        padding: 4px 32px 8px 0;
        text-align: right;
        color: #999;
      }

      .avatars {
        .u-form-item__body {
          .default {
            width: 160px;
            height: 160px;
          }
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #1365dd;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    z-index: 999;
  }
}
</style>