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">
            <el-form-item label="走访人姓名" prop="description">
              <span>且听风吟</span>
            </el-form-item>
            <el-form-item label="身份证账号" prop="description">
              <span>2131313</span>
            </el-form-item>
            <el-form-item label="数据源描述" prop="description" :rules="[{ required: true, message: '请输入数据源描述', trigger: 'blur' }]">
              <el-input
                size="small"
                placeholder="请输入数据源描述"
                v-model="form.description">
              </el-input>
            </el-form-item>
            <el-form-item label="村微应用" prop="appId" :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
              <el-select size="small" v-model="form.appId" placeholder="请选择村微应用">
                <el-option
                  v-for="item in appList"
                  :key="item.id"
                  :label="item.appName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </ai-dialog>
    </template>
  </ai-card>
</template>

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

    props: ['id'],

    data () {
      return {
        appList: [],
        isShow: false,
        form: {
          description: '',
          appId: ''
        }
      }
    },

    methods: {
      onConfirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.instance.post(`/appdiylargescreen/addOrUpdateDatasource`, {
              ...this.form,
              id: this.id ? this.id : ''
            }).then(res => {
              if (res.code === 0) {
                this.$message.success(this.id ? '编辑成功' : '添加成功')
                this.isShow = false

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

      onClose () {

      },

      getList () {

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