dvcp_v2_webapp/packages/2.0.5/AppCodeGeneration/app/visit/Visit.vue

<template>
  <ai-card title="走访记录" class="visit">
    <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 10" :key="index">
          <div class="visit-item__top">
            <div class="left">
              <img src="https://p26-passport.byteacctimg.com/img/user-avatar/6401428bcd3b2b9bfed4f31cca07b798~300x300.image">
              <h2>且听风吟</h2>
            </div>
            <span>2020-07-05 12:02:33</span>
          </div>
          <p>且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟且听风吟</p>
          <div class="visit-imgs">
          </div>
          <div class="visit-status">
            <span>现实状态：</span>
            <i>失联</i>
          </div>
        </div>
      </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">
          <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="date"
                style="width: 100%;"
                size="small"
                value-format="yyyy-MM-dd"
                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="description" style="width: 100%;">
              <el-input type="textarea" placeholder="请输入描述" v-model="form.description" :rows="4"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="images" style="width: 100%;">
              <ai-uploader v-model="form.images" :instance="instance" :limit="9"></ai-uploader>
            </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'],

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

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

    methods: {
      getList () {
        this.instance.post(`/app/appvisitvondolence/list?id=${this.id}&size=10000`).then(res => {
          if (res.code === 0) {
            this.list = res.data.records
          }
        })
      },

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

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

      onClose () {

      }
    }
  }
</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;
        }

        .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 {
              width: 40px;
              height: 40px;
              margin-right: 10px;
              border-radius: 50%;
            }

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