初始化

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

@@ -0,0 +1,179 @@
+<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>