cmanager/src/views/manage/survey/sub/detail.vue

<template>
  <el-drawer
    title="问卷回答列表"
    :visible.sync="viewDrawer"
    append-to-body
    size="100%"
  >
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      ref="crud"
      @search-change="searchChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @search-reset="searchReset"
    >
      <template slot-scope="{ row }" slot="menu">
        <el-button
          type="text"
          size="small"
          @click.stop="updateRow(row)"
        ><i class="el-icon-share"></i>处理
        </el-button>
      </template>
    </avue-crud>
  </el-drawer>
</template>

<script>
import {
  getQueryEmploymentSurveyUserBySurveyId,
  disposeEmploymentSurveyManage
} from '@/api/manage/survey'

const initPages = {
  pageSize: 10,
  currentPage: 1,
  total: 100,
}
const classIsDeleted = {
  0: '否',
  1: '是',
}
const classStatus = {
  0: '未处理',
  1: '已处理',
  2: '关闭'
}
const classEnumStatus = Object.keys(classStatus).map((item) => ({
  label: classStatus[item], value: Number(item)
}))
export default {
  props: {
    visible: Boolean,
    rowData: {default: null, type: Function},
  },
  computed: {
    viewDrawer: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    option() {
      return {
        size: 'medium',
        dateBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        height: "auto",
        reserveSelection: false,
        border: true,
        columnBtn: false,
        refreshBtn: false,
        tip: false,
        selection: true,
        searchMenuSpan: 6,
        align: 'center',
        column: [
          {
            label: '应答人',
            prop: 'replyName',
            search: true,
          }, {
            label: '回复内容',
            prop: 'replyContent',
          }, {
            label: '用户电话',
            prop: 'replyPhone',
            search: true,
          }, {
            label: '手机号',
            prop: 'surveyContent',
          }, {
            label: '创建人',
            prop: 'createUser',
          }, {
            label: '创建时间',
            prop: 'createTime',
          }, {
            label: "是否处理",
            prop: "status",
            type: "select",
            dicData: classEnumStatus,
            search: true,
          },
          {
            label: "处置情况",
            prop: "disposalSituation",
            search: true,
          },
        ]
      }
    }
  },
  watch: {
    viewDrawer(val) {
      val ? this.onPageLoad() : null
    }
  },
  data() {
    return {
      loading: false,
      data: [],
      page: Object.assign({}, initPages),
      query: {}
    }
  },
  created() {

  },
  methods: {
    onPageLoad() {
      if (!this.rowData) return
      console.log('row2', this.rowData)
      this.onLoad()
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad();
      done();
    },
    currentChange(val) {
      this.page.currentPage = val
      this.onLoad()
    },
    sizeChange(val) {
      this.page.currentPage = 1
      this.page.pageSize = val
      this.onLoad()
    },
    refreshChange() {
      this.page.currentPage = 1;
      this.onLoad()
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1
      this.onLoad();
    },
    updateRow(row) {
      const _this = this
      let h = this.$createElement;
      this.$prompt("回复处理", // "请核对信息后",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "完 成",
          cancelButtonText: "取 消",
          center: true,
          inputType: "textarea",
          inputPlaceholder: "处理内容",
          beforeClose: async function (action, instance, done) {
            if (action === 'confirm') {
              const disposalSituation = instance.inputValue
              if (!disposalSituation) {
                this.$message({type: "info", message: "请输入处理内容"});
              } else {
                let resData = await disposeEmploymentSurveyManage({id: row.id, disposalSituation, status: 1})
                if (resData.data.code === 200) {
                  this.$message({type: "success", message: "操作成功"});
                  done()
                  _this.onLoad();
                }
              }
            } else {
              done()
            }
          }
        }
      )
    },
    onLoad() {
      if (!this.rowData) return
      return new Promise(async (resolve, reject) => {
        let params = {
          surveyId: this.rowData.id,
          current: this.page.currentPage,
          size: this.page.pageSize,
          ...this.query,
        }
        this.loading = true
        let resData = await getQueryEmploymentSurveyUserBySurveyId(params)
        if (resData.data.code === 200) {
          const {current, records, total, size} = resData.data.data
          this.data = records;
          this.page.total = total;
          this.loading = false;
          resolve()
        } else {
          reject()
        }
      })
    }
  }
}
</script>

<style>

</style>