From 27d46df2a759420ecff8737881c77bdf45ec583b Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Thu, 19 May 2022 17:28:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E5=BE=AE=E5=91=98=E5=B7=A5=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiBottomBtn.vue         |  40 ++++++
 src/components/AiGroup.vue             |  29 ++++
 src/components/AiItem.vue              |  82 +++++++++++
 src/components/AiPagePicker.vue        |   1 +
 src/components/AiTabPanes.vue          |   5 +-
 src/components/pages/selectSysUser.vue | 181 +++++++++++++++++++++++++
 6 files changed, 336 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AiBottomBtn.vue
 create mode 100644 src/components/AiGroup.vue
 create mode 100644 src/components/AiItem.vue
 create mode 100644 src/components/pages/selectSysUser.vue

diff --git a/src/components/AiBottomBtn.vue b/src/components/AiBottomBtn.vue
new file mode 100644
index 00000000..ae1c8b0a
--- /dev/null
+++ b/src/components/AiBottomBtn.vue
@@ -0,0 +1,40 @@
+<template>
+  <section class="AiBottomBtn">
+    <slot v-if="$slots.default"/>
+    <u-gap v-else height="112"/>
+    <div class="fixed" @click="$emit('click')">
+      <slot v-if="$slots.default"/>
+      <div class="text" v-text="text"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiBottomBtn",
+  props: {
+    text: {default: ""}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiBottomBtn {
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    width: 100vw;
+  }
+
+  .text {
+    width: 100%;
+    font-family: PingFangSC-Medium, PingFang SC;
+    line-height: 112px;
+    text-align: center;
+    font-weight: 500;
+    color: #FFFFFF;
+    background: #1365DD;
+    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
+  }
+}
+</style>
diff --git a/src/components/AiGroup.vue b/src/components/AiGroup.vue
new file mode 100644
index 00000000..1f8b4767
--- /dev/null
+++ b/src/components/AiGroup.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="AiGroup">
+    <slot/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiGroup",
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiGroup {
+  background: #FFFFFF;
+  box-shadow: inset 0px -1px 0px 0px #DDDDDD;
+  padding-left: 32px;
+
+  & + .AiGroup {
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/src/components/AiItem.vue b/src/components/AiItem.vue
new file mode 100644
index 00000000..cf5be5a1
--- /dev/null
+++ b/src/components/AiItem.vue
@@ -0,0 +1,82 @@
+<template>
+  <section class="AiItem">
+    <div v-if="topLabel" class="topLabel">
+      <div class="labelPane" flex>
+        <div class="label" :class="{required}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <div class="content">
+        <slot v-if="$slots.default"/>
+        <div v-else v-text="value"/>
+      </div>
+    </div>
+    <div v-else class="normal" flex>
+      <div class="fill" flex>
+        <div class="label" :class="{required}" v-text="label"/>
+        <slot name="sub" v-if="$slots.sub"/>
+      </div>
+      <slot v-if="$slots.default"/>
+      <div v-else v-text="value"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiItem",
+  props: {
+    value: {default: ""},
+    label: {default: ""},
+    required: Boolean,
+    topLabel: Boolean
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiItem {
+  font-family: PingFangSC-Regular, PingFang SC;
+
+  .normal {
+    width: 100%;
+    border-bottom: 2px solid #ddd;
+    padding-right: 32px;
+    box-sizing: border-box;
+    height: 112px;
+  }
+
+  .label {
+    padding-left: 20px;
+    font-weight: 400;
+    color: #333333;
+    margin-right: 20px;
+    position: relative;
+
+    &.required:before {
+      position: absolute;
+      display: block;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: "*";
+      color: #f46;
+    }
+  }
+
+  .topLabel {
+    padding: 32px 32px 32px 0;
+    border-bottom: 2px solid #ddd;
+
+    .labelPane {
+      margin-bottom: 32px;
+    }
+
+    .content {
+      padding-left: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/components/AiPagePicker.vue b/src/components/AiPagePicker.vue
index 0027e434..f35a0f19 100644
--- a/src/components/AiPagePicker.vue
+++ b/src/components/AiPagePicker.vue
@@ -28,6 +28,7 @@ export default {
     return {
       configList: {
         resident: {url: "/components/pages/selectResident", label: "name"},
+        sysUser:{url: "/components/pages/selectSysUser", label: "name"},
         gird: {url: "/components/pages/selectGird", label: "girdName"},
         party: {url: "/components/pages/selectParty", label: "name"},
         custom: {...this.ops}
diff --git a/src/components/AiTabPanes.vue b/src/components/AiTabPanes.vue
index a45a967a..afc67206 100644
--- a/src/components/AiTabPanes.vue
+++ b/src/components/AiTabPanes.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="AiTabPanes">
+  <section class="AiTabPanes" :style="{background}">
     <div class="item" :class="{active:value==i}" v-for="(item, i) in tabs" :key="i"
          @click="handleClick(item,i)">{{ item }}
     </div>
@@ -18,7 +18,8 @@ export default {
   },
   props: {
     value: {default: ""},
-    tabs: {default: () => []}
+    tabs: {default: () => []},
+    background: {default: ""}
   },
   methods: {
     handleClick(item, index) {
diff --git a/src/components/pages/selectSysUser.vue b/src/components/pages/selectSysUser.vue
new file mode 100644
index 00000000..2f27b52f
--- /dev/null
+++ b/src/components/pages/selectSysUser.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="selectResident">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="name" :show-action="false" @change="getList"/>
+    </AiTopFixed>
+    <div class="user-list">
+      <template v-if="list.length>0">
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div class="select-img" @click="checkClick(index)">
+            <img :src="item.isCheck ? checkIcon : cirIcon" alt="">
+          </div>
+          <div class="user-info">
+            <img :src="item.photo" alt="" v-if="item.photo">
+            <img src="./img/user-img.png" alt="" v-else>{{ item.name }}
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <AiEmpty/>
+        <div class="pad-b118"/>
+      </template>
+    </div>
+    <div class="pad-b118"/>
+    <div class="footer">
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "selectResident",
+  appName: "人员选择器(居民档案)",
+  data() {
+    return {
+      current: 1,
+      total: 0,
+      name: '',
+      list: [],
+      cirIcon: require('./img/xz.png'),
+      checkIcon: require('./img/xzh.png'),
+      selected: []
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    isSingle() {
+      return this.$route.query.single
+    }
+  },
+  onLoad(query) {
+    if (query.selected) {
+      this.selected = query.selected?.split(",") || []
+    }
+    this.getList()
+  },
+  methods: {
+    getList() {
+      let {current, total, name: con} = this
+      if (total == 0 || current <= total) {
+        this.$http.post(`/admin/user/userIntegralList`, null, {
+          params: {current, size: 20, con}
+        }).then(res => {
+          if (res?.data) {
+            this.total = res.data.total || 0
+            res.data.records.forEach(e => {
+              e.isCheck = this.selected.includes(e.idNumber)
+            })
+            this.list = [this.list, res.data.records || []].flat()
+          }
+        })
+      }
+    },
+    checkClick(index) {
+      if (this.isSingle) {
+        this.list.map((e, i) => {
+          e.isCheck = i == index;
+        })
+      } else this.list[index].isCheck = !this.list[index].isCheck
+
+    },
+    confirm() {
+      let checkList = []
+      this.list.map((item) => {
+        if (item.isCheck) {
+          checkList.push(item)
+        }
+      })
+      if (!checkList.length) {
+        return this.$u.toast('请先选择人员')
+      } else {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker:sysUser", checkList)
+          }
+        })
+      }
+    }
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.selectResident {
+  ::v-deep .AiTopFixed .u-search {
+    margin-bottom: 0 !important;
+  }
+
+  .pad-b118 {
+    padding-bottom: 118px;
+  }
+
+  .user-list {
+    background-color: #fff;
+
+    .item {
+      .select-img {
+        display: inline-block;
+
+        img {
+          width: 48px;
+          height: 48px;
+          margin: 12px 36px 12px 30px;
+          vertical-align: middle;
+        }
+      }
+
+      .user-info {
+        display: inline-block;
+        padding: 20px 0 20px 0;
+        width: calc(100% - 114px);
+        height: 100%;
+        border-bottom: 1px solid #E4E5E6;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 74px;
+
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+          margin-right: 34px;
+          vertical-align: bottom;
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+    }
+  }
+}
+</style>