H5/pzhgt.git - Gitblit

<template>
  <div class='old-authentication'>
    <v-header
      title="高龄认证"
      :bar="bar"
      search
      @on-search="onSearch"
    ></v-header>
    <div class="add flex">
      <el-upload
        name="file"
        accept=".xls, .xlsx"
        :headers={Authorization:Authorization}
        class="upload-demo"
        style="display:inline-block"
        :show-file-list="false"
        :action="uploadSrc"
        :on-success="success"
        :on-error="error"
        multiple
      >
        <el-button
          type="primary"
          size="small"
        >导入
        </el-button>
      </el-upload>
      <!-- <button class="m_btn small bgc_primary">导入</button> -->
      <button
        class="m_btn small bgc_info"
        @click="onDown"
      >下载模板</button>
    </div>
    <div class="text">
      <p data-content="提示：">1.建议及时导入或添加高龄老人，便于老人生存认证和社区统计。系统将自动同步实有人口80岁（含）以上的高龄老人信息</p>
      <p>2.是否办理高龄津贴：导入或添加的高龄老人默认为已办理高龄津贴人员，同步的实有人口信息（老人列表若无此人信息）为未办理人员</p>
    </div>
    <div class="tab">
      <v-tool-table
        :trs="trs"
        :tds="tds"
        first
        firstWidth="50px"
      >
        <template v-slot:first-th>
          <div>
            <el-checkbox v-model="maxall"></el-checkbox>
          </div>
        </template>
        <template v-slot:first-td="{scope}">
          <div>
            <el-checkbox v-model="scope.is_check"></el-checkbox>
          </div>
        </template>
        <template v-slot:level="{scope}">
          <b>{{['','80-89周岁','90-99周岁','100周岁（含）以上）'][scope.level]}}</b>
        </template>
        <template v-slot:gl="{scope}">
          <b>{{['','是','否'][scope.isBigAge]}}</b>
        </template>
        <template v-slot:jz="{scope}">
          <b>{{['','是','否'][scope.isExist]}}</b>
        </template>
        <template v-slot:btn="{scope}">
          <div class="table_flex">
            <!-- {{item.scope.state}} -->
            <span
              class="col_primary"
              @click="onShow(scope)"
            >查看</span>
            <span
              class="col_primary"
              @click="onDel(scope)"
            >删除</span>
            <span
              class="col_primary"
              @click="onEdit(scope)"
            >编辑</span>
          </div>
        </template>
      </v-tool-table>
    </div>
    <v-tool-page
      :item="paged"
      @on-page="onPage"
    ></v-tool-page>
  </div>
</template>
 
<script>
import { mapState } from "vuex";
import volunteer_examineVue from "../../fixed/child/volunteer_examine.vue";
export default {
  props: {},
  components: {},
  data() {
    return {
      bar: [
        { title: "姓名", name: "name" },
        { title: "身份证", name: "idCard" },
        {
          title: "人员类别",
          name: "level",
          type: "select",
          list: ["全部", "80-89周岁", "90-99周岁", "100周岁(含)以上"].map(
            (r, v) => {
              return { label: r, value: v > 0 ? v : "" };
            }
          ),
        },
        {
          title: "健在",
          name: "isExist",
          type: "select",
          list: ["全部", "是", "否"].map((r, v) => {
            return { label: r, value: v > 0 ? v : "" };
          }),
        },
        {
          title: "是否办理高龄津贴",
          name: "isBigAge",
          type: "select",
          list: ["全部", "是", "否"].map((r, v) => {
            return { label: r, value: v > 0 ? v : "" };
          }),
        },
      ],
      trs: [
        { text: "姓名", val: "name" },
        { text: "身份证号", val: "idCard" },
        { text: "年龄", val: "age", width: "80px" },
        { text: "出生年月", val: "birthday" },
        { text: "人员类别", val: "btn", slot: "level" },
        { text: "户籍地", val: "domicile" },
        { text: "健在", val: "btn", slot: "jz" },
        { text: "是否办理高龄津贴", val: "btn", slot: "gl" },
        { text: "创建时间", val: "createAt" },
        { text: "更新时间", val: "updateAt" },
        { text: "操作", val: "btn" },
      ],
      tds: [],
      paged: { page: 0, total: 0, r: 0, limit: 10 },
      os: {},
      search: {},
      maxall: false,
      maxallTime: false,
      sendIds: [],
      uploadSrc: "",
      Authorization: "",
    };
  },
  computed: {
    ...mapState({ vuex_page: "pageReset" }),
  },
  watch: {
    vuex_page: {
      handler(n) {
        if (n.page === this.$route.path) {
          this.init();
        }
      },
      deep: true,
    },
    maxall(n) {
      if (this.maxallTime) return 0;
      this.tds = this.tds.map((r) => {
        r.is_check = n;
        return r;
      });
    },
    tds: {
      handler(n) {
        let x = n.filter((r) => {
          return r.is_check;
        });
        this.maxallTime = true;
        this.maxall = x.length === n.length && x.length > 0;
        setTimeout(() => {
          this.maxallTime = false;
        }, 500);
        this.sendIds = x.map((r) => {
          return r.id;
        });
      },
      deep: true,
    },
  },
  methods: {
    onDown() {
      this.$api.get("eldersauth/imp/templates", {}, (e) => {
        window.location.href = e;
      });
    },
    out() {
      let v = demo.copy(
        Object.assign(this.os, this.search, {
          pageNum: this.paged.page,
          pageSize: this.paged.limit,
          ids: this.sendIds,
        })
      );
      this.$api.post("eldersauth/export", v, (e) => {
        window.location.href = e;
      });
    },
    is_time(v) {
      return demo.timeout(new Date(v).getTime(), "alls", "-");
    },
    is_type(v) {
      return ["待审核", "已通过", "已驳回"][v] || v + 1;
    },
    // 反馈
    onSend(v) {
      this.$store.dispatch("setFixed", {
        event: "add",
        data: {
          title: "反馈",
          type: "aff-old-cer-send",
          data: { id: v.id },
        },
        time: Date.now(),
      });
    },
    onShow(e) {
      this.$store.dispatch("setFixed", {
        event: "add",
        data: {
          title: "查看",
          type: "old-see",
          data: { type: "show", data: e },
        },
        time: Date.now(),
      });
    },
    onDel(e) {
      this.$js.model("删除", "是否删除", (res) => {
        if (res) {
          this.$api.post(
            "eldersauthelderly/delete?id=" + e.id,
            { id: e.id },
            () => {
              demo.toast("删除成功");
              this.init();
            }
          );
        }
      });
    },
    onEdit(e) {
      this.$store.dispatch("setFixed", {
        event: "add",
        data: {
          title: "编辑",
          type: "old-cer",
          data: { type: "edit", data: e },
        },
        time: Date.now(),
      });
    },
    onSearch(v) {
      let x = demo.copy(v);
      this.search = x;
      this.paged.page = 1;
      this.init();
    },
    // 分页点击
    onPage(v) {
      if (v.page === this.paged.page && v.page && !v.reset) {
        return 0;
      }
      this.paged.page = v.page;
      this.paged.limit = v.limit;
      this.init();
    },
    // 获取数据
    init() {
      let v = demo.copy(
        Object.assign({}, this.os, this.search, {
          pageNum: this.paged.page,
          pageSize: this.paged.limit,
        })
      );
      this.$api.post("eldersauthelderly/page", v, (e) => {
        this.paged.total = e.total;
        this.paged.r++;
        this.tds = (e.records || []).map((r) => {
          r.is_check = false;
          return r;
        });
      });
    },
    success(e) {
      if (e.code === 200) {
        demo.toast("导入成功");
        this.init();
      } else {
        try {
          let msg = JSON.parse(e.msg || "[]");
          msg = msg.map((r) => {
            return {
              val: r.errorMsg,
              line: r.errorPosition,
            };
          });
          demo.frame(
            {
              dom: "#cor-con-msg",
              type: "html",
              scroll: true,
              style: {
                left: "220px",
                width: "calc(80% - 220px)",
                height: "50%",
              },
              title: "导入失败,失败原因如下:",
            },
            (res) => {
              if (res.doms) {
                let dom = res.doms.content;
                msg.forEach((x) => {
                  demo
                    .js(dom, 0)
                    .append(
                      '<p style="font-size: 15px;font-weight: 600;line-height: 1.5;padding: 5px 0;color: #333;">' +
                        x.line +
                        "</p><p style='font-size: 14px;line-height: 1.4;color: tomato;padding: 5px;margin-bottom: 8px;'>" +
                        x.val +
                        "</p>"
                    );
                });
              }
            }
          );
        } catch (err) {
          demo.toast(e.msg);
        }
      }
    },
    error() {
      demo.toast("导入失败");
    },
  },
  mounted() {
    this.uploadSrc = this.$js.api.http + "eldersauthelderly/import";
    this.Authorization = "Bearer " + demo.$session.get("token") || "";
  },
};
</script>
<style lang='less' scoped>
.old-authentication {
  overflow-y: auto;
  .text {
    p {
      position: relative;
      padding-left: 40px;
      font-size: 13px;
      color: #669;
      line-height: 1;
      margin-bottom: 5px;
      &::before {
        content: attr(data-content);
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .add,
  .tab,
  .text {
    margin-bottom: 10px;
  }
  .add .m_btn {
    min-width: 80px;
  }
}
</style>