Merge branch 'dev_xzeq' of http://47.92.108.28/changchao/founder_vue into dev_xzeq

src/components/PersonInfor.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-08-31 09:51:34
+ * @LastEditTime: 2021-08-31 14:59:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\components\PersonInfor.vue
+-->
+<template>
+  <div class="rightContent" id="personInfor">
+    <div class="Content paneDiv paneDiv2">
+      <div class="header">
+        <span class="title">{{ title || "人员信息详情" }}</span>
+        <span class="iconBox">
+          <slot name="icon"></slot>
+        </span>
+      </div>
+      <div class="Boxcontent">
+        <div class="content">
+          <div class="imgBox">
+            <img :src="item" alt="" v-for="item in imgArr" :key="item" />
+          </div>
+          <div
+            :class="{
+              inforContent: true,
+              pt0: imgArr.length > 0 ? false : true,
+            }"
+          >
+            <div class="rows" v-for="(item, index) in InforProps" :key="index">
+              <div :class="'col' + i.col" v-for="i in item" :key="i.id">
+                <span class="label" :style="{ width: labelWidth }">{{
+                  i.label
+                }}</span>
+                <span
+                  class="cont"
+                  :style="{ width: `calc(100% - ${labelWidth})` }"
+                  >{{ pageData[i.prop] || "-" }}</span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+          <div class="rows">
+            <div
+              :class="'col' + item.col"
+              v-for="item in footerProps"
+              :key="item.prop"
+            >
+              <span class="label">{{ item.label }}</span>
+              <span class="cont">{{ pageData[item.prop] || "-" }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      //切割好的二维数组
+      InforProps: [],
+      //页脚配置
+      footerProps: this.pageFooterProps,
+      //页面信息对象
+      pageData: this.pageObject,
+
+      col: 0,
+    };
+  },
+  props: {
+    //详情配置
+    cxQueryField: {
+      type: Array,
+      default: () => [],
+    },
+    //页脚配置
+    pageFooterProps: {
+      type: Array,
+      default: () => [],
+    },
+    //接口请求的对象所有信息都包含的
+    pageObject: {
+      type: Object,
+      default: () => ({}),
+    },
+    //label的宽度默认80
+    labelWidth: String,
+    //页面标题
+    title: String,
+    //照片集合
+    imgArr: Array,
+  },
+  methods: {
+    //根据col切割为二维数组
+    getPageInfor() {
+      let arr = [];
+      this.cxQueryField.forEach((item, index) => {
+        // debugger;
+        this.col += item.col - 0;
+        if (this.col > 10) {
+          this.InforProps.push(arr);
+          this.col = item.col - 0;
+          arr = [];
+          arr.push(item);
+        } else {
+          arr.push(item);
+        }
+        if (index == this.cxQueryField.length - 1) {
+          if (arr.length >= 1) {
+            this.InforProps.push(arr);
+          }
+        }
+      });
+    },
+  },
+  mounted() {
+    this.getPageInfor();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@mixin pageStyle() {
+  padding: 13px 20px;
+}
+.rightContent {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  .paneDiv {
+    background: #ffffff;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
+    opacity: 1;
+    border-radius: 4px;
+    margin: 16px 20px 50px;
+    position: relative;
+  }
+  .paneDiv2 {
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: none;
+    opacity: 1;
+    border-radius: 8px;
+  }
+  .header {
+    @include pageStyle();
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e4e4e4;
+    .title {
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 600;
+      color: #363636;
+    }
+    .iconBox {
+      i {
+        font-size: 18px;
+        color: #808591;
+        &:not(:last-of-type) {
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+  .Boxcontent {
+    @include pageStyle();
+    .content {
+      height: auto;
+      display: block;
+      .imgBox {
+        margin: 6px 0 10px;
+        > img {
+          width: 140px;
+          height: 140px;
+          margin-left: 20px;
+          &:first-of-type {
+            margin-left: 10px;
+          }
+        }
+      }
+      .inforContent {
+        padding: 10px 0;
+        width: 100%;
+        border-bottom: 1px solid #e4e4e4;
+        .rows {
+          box-sizing: border-box;
+          width: 100%;
+          padding: 5px 10px;
+          &:nth-of-type(2n + 1) {
+            background-color: #f3f8fc;
+          }
+        }
+      }
+      .pt0 {
+        padding-top: 0;
+      }
+    }
+    .footer {
+      padding-top: 13px;
+      .rows {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 10px;
+        .label {
+          color: #808591 !important;
+          font-weight: bold !important;
+        }
+      }
+    }
+  }
+  .col3,
+  .col6,
+  .col10,
+  .col5 {
+    display: inline-block;
+    vertical-align: top;
+    .label {
+      font-size: 14px;
+      color: #363636;
+      font-weight: bold;
+      display: inline-block;
+      width: 80px;
+      text-align: left;
+      vertical-align: top;
+    }
+    .cont {
+      color: #808591;
+      font-size: 14px;
+      display: inline-block;
+      width: calc(100% - 80px);
+      box-sizing: border-box;
+      padding-right: 15px;
+      padding-left: 10px;
+    }
+  }
+  .col3 {
+    width: 33%;
+  }
+  .col6 {
+    width: 66%;
+  }
+  .col10 {
+    width: 100%;
+  }
+  .col5 {
+    width: 50%;
+  }
+}
+</style>

src/views/kyxs/hmxs/hmxsDetail.vue

+<!--
+ * @Author: your name
+ * @Date: 2021-08-31 09:52:33
+ * @LastEditTime: 2021-08-31 15:01:01
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \founder_vue\src\views\hnksh\ceshi.vue
+-->
+<template>
+  <div class="Content">
+    <right-content
+      :cxQueryField="cxQueryField"
+      :pageObject="pageObject"
+      :pageFooterProps="pageFooterProps"
+      :imgArr="imgArr"
+      labelWidth="110px"
+    >
+      <template slot="icon">
+        <i class="el-icon-delete-solid"></i>
+        <i class="el-icon-delete-solid"></i>
+        <i class="el-icon-delete-solid"></i>
+      </template>
+    </right-content>
+  </div>
+</template>
+
+<script>
+import rightContent from "@c/PersonInfor.vue";
+import { get, post, postform, postJson } from "@/utils/http.js";
+export default {
+  name: "queryAj",
+  components: {
+    rightContent,
+  },
+  data() {
+    return {
+      cxQueryField: [
+        {
+          label: "联系人姓名:",
+          prop: "a1",
+          col: "3",
+        },
+        {
+          label: "联系人身份证:",
+          prop: "a2",
+          col: "3",
+        },
+        {
+          label: "被联系人姓名:",
+          prop: "a3",
+          col: "3",
+        },
+        {
+          label: "被联系人身份证:",
+          prop: "a4",
+          col: "3",
+        },
+      ],
+      pageFooterProps: [
+        {
+          label: "填表单位的:",
+          prop: "b1",
+          col: "3",
+        },
+        {
+          label: "填表人:",
+          prop: "b2",
+          col: "3",
+        },
+        {
+          label: "填表日期:",
+          prop: "b3",
+          col: "3",
+        },
+      ],
+      pageObject: {
+        a1: "但是大多数都是",
+        a2: "fawwfafwa",
+        a3: "但我仿佛大多数都是",
+        a4: "是否色",
+      },
+      imgArr: [],
+    };
+  },
+  mounted() {},
+  methods: {},
+  created() {},
+};
+</script>
+<style scoped lang="scss">
+</style>