dvcp_v2_webapp/project/biaopin/AppCodeGeneration/app/visit/Visit.vue

<template>
  <ai-card title="走访记录" class="visit" v-loading="loading">
    <el-button slot="right" icon="iconfont iconAdd" type="text" @click="isShow = true">添加走访记录</el-button>
    <template #content>
      <div class="visit-list">
        <div class="visit-item" v-for="(item, index) in list" :key="index">
          <div class="visit-item__top">
            <div class="left">
              <div class="avatar">{{ item.name.substr(item.name.length - 2) }}</div>
              <h2>{{ item.name }}</h2>
            </div>
            <span>{{ item.visitTime }}</span>
          </div>
          <b>{{ item.title }}</b>
          <p>{{ item.description }}</p>
          <div class="visit-imgs" v-if="item.images.length">
            <ai-uploader v-model="item.images" :instance="instance" :limit="9" disabled/>
          </div>
          <div class="visit-status">
            <span>现实状态：</span>
            <i>{{ dict.getLabel('visitCondolenceReality', item.reality) }}</i>
          </div>
        </div>
        <ai-empty v-if="!list.length"></ai-empty>
      </div>
      <ai-dialog
          :visible.sync="isShow"
          width="1000px"
          height="500px"
          title="添加走访记录"
          @close="onClose"
          @onConfirm="onConfirm">
        <el-form ref="form" :model="form" label-width="110px" label-position="right" size="small">
          <ai-bar title="走访记录"></ai-bar>
          <div class="ai-form" :model="form" label-width="110px" label-position="right">
            <el-form-item label="走访时间" prop="visitTime"
                          :rules="[{ required: true, message: '请选择走访时间', trigger: 'change' }]">
              <el-date-picker
                  v-model="form.visitTime"
                  type="datetime"
                  style="width: 100%;"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择走访时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="现实状态" prop="reality"
                          :rules="[{ required: true, message: '请选择现实状态', trigger: 'change' }]">
              <ai-select
                  v-model="form.reality"
                  :selectList="dict.getDict('visitCondolenceReality')"
                  laceholder="请选择现实状态">
              </ai-select>
            </el-form-item>
            <el-form-item label="入户走访事项" prop="title" style="width: 100%;"
                          :rules="[{ required: true, message: '请输入 入户走访事项'}]">
              <el-input placeholder="请输入 入户走访事项" v-model="form.title" maxlength="30" show-word-limit/>
            </el-form-item>
            <el-form-item label="入户走访内容" prop="description" style="width: 100%;">
              <el-input type="textarea" placeholder="请输入 入户走访内容" v-model="form.description" :rows="4" maxlength="500"
                        show-word-limit/>
            </el-form-item>
            <el-form-item label="图片" prop="images" style="width: 100%;">
              <ai-uploader v-model="form.images" :instance="instance" :limit="9" isShowTip/>
            </el-form-item>
          </div>
        </el-form>
      </ai-dialog>
    </template>
  </ai-card>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'visit',

  props: ['id', 'dict', 'instance', 'appId', 'name', 'areaId'],

  data() {
    return {
      appList: [],
      list: [],
      loading: false,
      isShow: false,
      form: {
        visitTime: '',
        reality: '',
        images: [],
        description: ''
      }
    }
  },

  computed: {
    ...mapState(['user'])
  },

  mounted() {
    this.dict.load('visitCondolenceReality').then(() => {
      this.getList()
    })
  },

  methods: {
    getList() {
      this.loading = true
      this.instance.post(`/app/appvisitvondolence/list?optionId=${this.id}&size=10000`).then(res => {
        if (res.code === 0) {
          this.list = res.data.records.map(item => {
            return {
              ...item,
              images: item.images ? JSON.parse(item.images) : []
            }
          })
        }

        this.loading = false
      })
    },

    onConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appvisitvondolence/addOrUpdate`, {
            ...this.form,
            optionId: this.id,
            images: JSON.stringify(this.form.images),
            applicationId: this.appId,
            name: this.name,
            areaId: this.areaId
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('添加成功')
              this.isShow = false

              this.getList()
            }
          })
        }
      })
    },

    onClose() {
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.visit {
  .visit-list {
    .visit-item {
      padding: 10px 0;
      border-bottom: 1px solid #eee;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;
      }

      .visit-status {
        display: flex;
        align-items: center;
        font-size: 14px;

        span {
          color: #333;
        }

        i {
          color: #999;
          font-style: normal;
        }
      }

      & > p {
        line-height: 1.4;
        margin-bottom: 4px;
        text-align: justify;
        color: #666;
        font-size: 16px;
      }

      b {
        display: block;
        margin-bottom: 6px;
      }

      .visit-item__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        span {
          font-size: 14px;
          color: #999;
        }

        .left {
          display: flex;
          align-items: center;

          img, .avatar {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-right: 10px;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            background: #26f;
          }

          h2 {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>