dvcp_v2_webapp/packages/wechat/AppInterview/AppInterview.vue

<template>
  <section class="AppInterview">
    <ai-list v-if="!isDetail">
      <template #title>
        <ai-title title="调查走访" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
                  :hideLevel="hideLevel" @change="page.current=1,getTableData()"/>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-search label="创建日期">
              <el-date-picker
                  size="small"
                  v-model="search.startTime"
                  placeholder="开始日期"
                  @change="page.current = 1, getTableData()"
                  value-format="yyyy-MM-dd"/>
              <el-date-picker
                  size="small"
                  v-model="search.endTime"
                  placeholder="结束日期"
                  @change="page.current = 1, getTableData()"
                  value-format="yyyy-MM-dd"/>
            </ai-search>
          </template>
          <template #right>
            <el-input
                suffix-icon="iconfont iconSearch"
                v-model="search.title"
                placeholder="标题"
                clearable
                @keyup.enter.native="page.current = 1, getTableData()"
                @clear="page.current = 1, search.title = '', getTableData()"
                size="small"/>
          </template>
        </ai-search-bar>
        <ai-table
            :tableData="tableData"
            :colConfigs="colConfigs"
            :total="page.total"
            :current.sync="page.current"
            :size.sync="page.size"
            @getList="getTableData">
          <el-table-column label="操作" align="center" slot="options" fixed="right" width="160">
            <template slot-scope="{row}">
              <div class="table-options">
                <el-button type="text" title="详情" @click="handleShow(row.id)">详情</el-button>
                <el-button type="text" title="删除" @click="handleDelete(row.id)"
                           v-if="permissions('app_appinterview_del')">删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <interview-detail v-else/>
  </section>
</template>

<script>
import InterviewDetail from "./interviewDetail";
import {mapState} from "vuex";

export default {
  name: "AppInterview",
  label: "调查走访",
  components: {InterviewDetail},
  provide() {
    return {
      interview: this
    }
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        {label: "标题", prop: "title"},
        {label: "时间", prop: "createTime"},
        {label: "所属区域", prop: "areaName"},
        {label: "操作人", prop: "createUserId", openType: 'userName'},
        {slot: "options"}
      ]
    },
    isDetail() {
      return !!this.$route.query.id
    },
    hideLevel() {
      return this.user.info.areaList?.length - 1
    }
  },
  data() {
    return {
      search: {startTime: null, endTime: null, title: "", areaId: "445203000000"},
      page: {current: 1, size: 10, total: 0},
      tableData: []
    }
  },
  created() {
    // this.search.areaId = JSON.parse(JSON.stringify(this.user.info.areaId))
    if (this.isDetail) {
    } else this.getTableData()
  },
  methods: {
    getTableData() {
      this.instance.post("/app/appinterview/list", null, {
        params: {...this.search, ...this.page}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
          this.$initWxOpenData()
        }
      })
    },
    handleShow(id) {
      if (id) {
        this.$router.push({query: {id}})
      } else this.$message.error('该条数据异常,无法打开!')
    },
    handleDelete(ids) {
      this.$confirm("是否要删除该调查走访?").then(() => {
        this.instance.post("/app/appinterview/delete", null, {params: {ids}}).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
    back() {
      this.$router.push({query: null})
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.AppInterview {
  height: 100%;

  ::v-deep .dateRange {
    .dateLabel {
      height: 32px;
      border: 1px solid #D0D4DC;
      line-height: 32px;
      padding: 0 8px;
      background: #F5F5F5;
    }

    .el-input__inner {
      border-radius: 0;
      transform: translateX(-1px);
    }
  }

  ::v-deep .ai-list__content--right-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>