增加页面

src/components/blindDate/appointList.vue

+<template>
+  <div class="appointList">
+    <div class="el-card__header">
+      <span>相亲约会记录</span>
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <el-button type="primary" class="el-button--small" @click="addAppoint">新增</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <div class="block">
+          <div class="searchInput" style="width:200px">
+            <el-input style="display:inline-block;width:170px;height:30px" placeholder="用户姓名"
+              v-model="msg.UserName" size="small" @clear="getList" @keyup.enter.native="getList" clearable>
+            </el-input>
+            <span @click="getList" class="el-icon-search"
+              style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="padding: 20px;background: #fff;">
+      <el-table :data="dataList" header-cell-class-name="headClass" style="width: 100%" border>
+        <el-table-column prop="ManName" label="男方信息">
+          <template slot-scope="scope">
+            <div class="appointUserInfo">
+              <div>
+                <img :src="scope.row.ManPhoto" style="width:30px;height:30px;border-radius:50%;margin-right:5px;" />
+              </div>
+              <div style="margin-top:4px;">{{scope.row.ManName}}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="WoManName" label="女方信息">
+          <template slot-scope="scope">
+            <div class="appointUserInfo">
+              <div>
+                <img :src="scope.row.WoManPhoto" style="width:30px;height:30px;border-radius:50%;margin-right:5px;" />
+              </div>
+              <div style="margin-top:4px;">{{scope.row.WoManName}}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Time" label="时间">
+        </el-table-column>
+        <el-table-column prop="Address" label="地点">
+        </el-table-column>
+        <el-table-column prop="Remark" label="备注">
+        </el-table-column>
+        <el-table-column prop="CreateDate" label="创建时间" width="200">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="130">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
+        layout="prev, pager, next" :current-page.sync="msg.pageIndex" :total="pageCount">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "appointList",
+    data() {
+      return {
+        msg: {
+          pageIndex: 1,
+          pageSize: 20,
+          UserId: 0,
+          UserName: '',
+        },
+        pageCount: 0,
+        dataList: [],
+      }
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      getList() {
+        this.apipost(
+          "/api/Miai/GetMiaiDatingPageList", this.msg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.dataList = res.data.data.pageData;
+              this.pageCount = res.data.data.pageCount;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+        )
+      },
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+      //新增
+      addAppoint() {
+        this.$router.push('/editAppoint');
+      },
+      //修改
+      Edit(row) {
+        let arr = encodeURIComponent(JSON.stringify(row))
+        this.$router.push({
+          name: 'editAppoint',
+          query: {
+            arr: arr,
+            blank: "y"
+          }
+        });
+      },
+      //删除记录
+      delete_b(item) {
+        let that = this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Miai/DelMiaiDatingInfo", {
+              DatingId: item.Id
+            },
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getList();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+          );
+        });
+      }
+    },
+  }
+
+</script>
+
+<style>
+  .appointList .el-card__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+
+  }
+
+  .appointList .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+
+  .appointUserInfo {
+    display: flex;
+  }
+
+</style>

src/components/blindDate/blindDateIndex.vue

@@ -187,6 +187,9 @@
           <li class="menu_item" :class="{'Fchecked':isChecked=='/topicList'}"  @click="isChecked='/topicList',CommonJump('topicList')">
             <i class="el-icon-menu"></i><span>话题列表</span>
           </li>
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/appointList'}"  @click="isChecked='/appointList',CommonJump('appointList')">
+            <i class="el-icon-menu"></i><span>相亲约会记录</span>
+          </li>
         </ul>
       </div>
     </div>

src/components/blindDate/editAppoint.vue

+<template>
+  <div class="editAppoint">
+    <div class="head-title">
+      <span @click="CommonJump('appointList')" class="blue point">约会记录列表</span> / 编辑话题
+    </div>
+    <div class="content">
+      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
+        <el-form-item label="男方" class="is-required">
+          <template v-if="JSON.stringify(manObj)!='{}'">
+            <div class="peopleHead">
+              <div><img :src="manObj.Photo" style="width:30px;height:30px;border-radius:50%;" /></div>
+              <div style="margin-left:3px;">{{manObj.Name}}</div>
+            </div>
+          </template>
+          <el-button type="primary" class="el-button--small" @click="addPeople(1)">选择男生</el-button>
+        </el-form-item>
+        <el-form-item label="女方" class="is-required">
+          <template v-if="JSON.stringify(womanObj)!='{}'">
+            <div class="peopleHead">
+              <div><img :src="womanObj.Photo" style="width:30px;height:30px;border-radius:50%;" /></div>
+              <div style="margin-left:3px;">{{womanObj.Name}}</div>
+            </div>
+          </template>
+          <el-button type="danger" class="el-button--small" @click="addPeople(2)">选择女生</el-button>
+        </el-form-item>
+        <el-form-item label="时间" class="is-required" prop="Time">
+          <el-date-picker v-model="addMsg.Time" size="small" type="datetime" format="yyyy-MM-dd hh:mm"
+            value-format='yyyy-MM-dd hh:mm' placeholder="选择日期时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="地点" class="is-required" prop="Address">
+          <el-input type="text" size="small" v-model="addMsg.Address"></el-input>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input type="textarea" v-model="addMsg.Remark" :rows="5"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin-top:20px">
+      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
+    </div>
+    <!-- 选择人物 -->
+    <el-dialog title="选择人物" :visible.sync="isShowGoods" width="900px">
+      <choicePeople ref="choicePeople" :isSingle="true" :Sex="Sex"></choicePeople>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="isShowGoods=false">取 消</el-button>
+        <el-button size="small" type="danger" @click="getGoodsChoice()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+
+</template>
+<script>
+  import choicePeople from "../common/choicePeople.vue";
+  export default {
+    components: {
+      choicePeople
+    },
+    data() {
+      return {
+        addMsg: {
+          Id: 0,
+          ManId: 0, //南方userid
+          WoManId: 0, //女方userid
+          Time: '', //时间
+          Address: '', //地点
+          Remark: '' //备注
+        },
+        rules: {
+          Time: [{
+            required: true,
+            message: '请选择时间',
+            trigger: 'blur'
+          }],
+          Address: [{
+            required: true,
+            message: '请填写地点',
+            trigger: 'blur'
+          }]
+        },
+        isShowGoods: false,
+        Sex: 0,
+        manObj: {},
+        womanObj: {}
+      };
+    },
+    created() {
+    },
+    methods: {
+      Save(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            if(this.addMsg.ManId==0){
+                this.Error('请选择男方');
+                return
+            }
+            if(this.addMsg.WoManId==0){
+                this.Error('请选择女方');
+                return
+            }
+            this.apipost("/api/Miai/SetMiaiDatingInfo", this.addMsg, res => {
+              if (res.data.resultCode == 1) {
+                this.CommonJump('appointList');
+                this.Success(res.data.message);
+              } else {
+                this.Error(res.data.message);
+              }
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      //选择男生
+      addPeople(num) {
+        this.Sex = num;
+        this.isShowGoods = true;
+        this.$nextTick(() => {
+          this.$refs.choicePeople.getList();
+        })
+      },
+      getGoodsChoice() {
+        var ckedArr = this.$refs.choicePeople.getChoicedGoods();
+        if (this.Sex == 1) {
+          this.manObj.Photo = ckedArr[0].Photo;
+          this.manObj.Name = ckedArr[0].RealName;
+          this.addMsg.ManId = ckedArr[0].UserId;
+        } else {
+          this.womanObj.Photo = ckedArr[0].Photo;
+          this.womanObj.Name = ckedArr[0].RealName;
+          this.addMsg.WoManId = ckedArr[0].UserId;
+        }
+        this.isShowGoods = false;
+      }
+    },
+    mounted() {
+      if(this.$route.query.arr){
+        let obj =JSON.parse(decodeURIComponent(this.$route.query.arr));
+        this.addMsg.Id = obj.Id;
+        this.addMsg.ManId = obj.ManId;
+        this.addMsg.WoManId = obj.WoManId;
+        this.addMsg.Time = obj.Time;
+        this.addMsg.Address = obj.Address;
+        this.addMsg.Remark = obj.Remark;
+
+        this.manObj.Photo = obj.ManPhoto;
+        this.manObj.Name = obj.ManName;
+        this.womanObj.Photo = obj.WoManPhoto;
+        this.womanObj.Name = obj.WoManName;
+      }
+    }
+  };
+
+</script>
+<style>
+  .editAppoint .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .editAppoint .peopleHead {
+    display: flex;
+    align-items: center;
+    float: left;
+    margin-right: 20px;
+    line-height: 0;
+    margin-top: 6px;
+  }
+
+</style>

src/components/common/choicePeople.vue

 <template>
   <div>
     <el-input size="mini" v-model="msg.RealName" placeholder="根据名称搜索" :clearable="true" @clear="msg.pageIndex=1,getList()"
-      @keyup.enter.native="msg.pageIndex=1,getList()">
+      @keyup.enter.native="msg.pageIndex=1,getList()" style="width:300px;">
       <el-button slot="append" @click="msg.pageIndex=1,getList()">搜索</el-button>
     </el-input>
     <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" height="450" style="width: 100%"
@@ -59,7 +59,7 @@
 </template>
 <script>
   export default {
-    props: ['ckGoods', "isSingle", "IsGetSpec"],
+    props: ['ckGoods', "isSingle", "IsGetSpec","Sex"],
     data() {
       return {
         dataList: [],
@@ -68,6 +68,7 @@
           pageSize: 15,
           Name: '', //姓名
           RealName: '', //真实姓名
+          Sex:0     //1男   2女  0 不限
         },
         total: 0,
         selectRow: [],
@@ -81,6 +82,9 @@
     methods: {
       //获取所有菜单
       getList() {
+        if(this.Sex){
+          this.msg.Sex = this.Sex;
+        }
         this.apipost("/api/Miai/GetBaseInfoPageList", this.msg, res => {
           if (res.data.resultCode == 1) {
             this.total = res.data.data.count;

src/router/index.js

@@ -318,6 +318,14 @@ export default new Router({
         path: '/editTopic', //相亲活动话题编辑
         name: 'editTopic',
         component: resolve => require(['@/components/blindDate/editTopic'], resolve),
+      },{
+        path: '/appointList', //相亲约会记录、
+        name: 'appointList',
+        component: resolve => require(['@/components/blindDate/appointList'], resolve),
+      },{
+        path: '/editAppoint', //编辑约会记录
+        name: 'editAppoint',
+        component: resolve => require(['@/components/blindDate/editAppoint'], resolve),
       }]
     },
     {