mediaAll/src/view/allMedia/components/reporting_list.vue

<template>
  <div class="mainTitle">文章列表</div>
  <br />
  <div class="lists">
    <!-- @click="() => toDetail(item)" -->
    <el-table :data="listTable" style="width: 100%">
      <el-table-column prop="title" label="标题" width="450px" />
      <el-table-column prop="phone" label="用户名" />
      <el-table-column prop="source" label="来源">
        <template #default="scope">
          {{ source[scope.row.source - 1] }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="回复状态">
        <template #default="scope">
          {{ replyFlag[scope.row.replyFlag] }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="更新时间">
        <template #default="scope">
          {{ format(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="modifyTime" label="推送时间">
        <template #default="scope">
          {{ format(scope.row.modifyTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="clueInfoCount" label="数量" />
      <el-table-column prop="" label="操作" width="200px">
        <template #default="scope">
          <el-popconfirm
            v-if="scope.row.status === 0"
            confirm-button-text="通过"
            cancel-button-text="不通过"
            @confirm="() => confirm(scope)"
            @cancel="() => cancel(scope)"
            title="是否通过该报料?"
          >
            <template #reference>
              <el-button link type="primary" size="small">审核</el-button>
            </template>
          </el-popconfirm>
          <el-button
            link
            type="primary"
            size="small"
            @click="() => lookBL(scope)"
          >
            查看
          </el-button>
          <el-button
            link
            v-if="scope.row.replyFlag != 1"
            type="primary"
            size="small"
            @click="() => replyBL(scope)"
          >
            回复
          </el-button>

          <el-popconfirm
            confirm-button-text="删除"
            cancel-button-text="不删除"
            @confirm="() => deleteBL(scope)"
            title="是否删除该报料?"
          >
            <template #reference>
              <el-button link type="danger" size="small"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="reportingDetail" title="报料详情" width="30%">
      <div style="overflow-y: auto">
        <el-row>
          <el-col :span="5">联系方式：</el-col>
          <el-col :span="19">
            <div v-text="reportingDetailData.row.phone"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">上报地址：</el-col>
          <el-col :span="19">
            <div v-text="reportingDetailData.row.address"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">报料详情：</el-col>
          <el-col :span="19">
            <div
              v-for="(v, i) in reportingDetailData.row.clueInfos"
              :key="i"
              style="padding: 10px 0; position: relative;padding-right: 112px;"
            >
              <span v-if="v.type == 0" v-text="v.materialUrl"></span>
              <img
                v-if="v.type == 1"
                :src="v.localUrl"
                alt="图片丢失"
                style="width: 80px"
              />
              <small
                style="
                  color: #999;
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                "
                v-text="format(v.addTime)"
              ></small>
            </div>
          </el-col>
        </el-row>
        <el-row
          v-if="
            reportingDetailData.row.clueReplies &&
            reportingDetailData.row.clueReplies.length
          "
        >
          <el-col :span="5">回复内容：</el-col>
          <el-col :span="19">
            <div v-text="reportingDetailData.row.clueReplies[0].content"></div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog v-model="reportingReplyStatus" title="回复" width="30%">
      <el-row>
        <el-col :span="5">报料内容：</el-col>
        <el-col :span="19">
          <div
            v-for="(v, i) in reportingDetailData.row.clueInfos"
            :key="i"
            style="padding: 2px 0; position: relative;padding-right: 112px;"
          >
            <span v-if="v.type == 0" v-text="v.materialUrl"></span>
            <img
              v-if="v.type == 1"
              :src="v.localUrl"
              alt="图片丢失"
              style="width: 80px"
            />
            <small
              style="
                color: #999;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
              "
              v-text="format(v.addTime)"
            ></small>
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="5">回复内容：</el-col>
        <el-col :span="19">
          <el-input
            v-model="reportingDetailData.row.reply"
            :rows="2"
            type="textarea"
            placeholder="请输入回复内容"
          />
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="replySave"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from 'vue';
// import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import {
  getreporting,
  delreporting,
  getreportingDetail,
  reportingShenhe,
  reportingReply,
} from '../../../api/index';
let T = undefined;
let total = -1;
// const router = useRouter();
const listTable = ref([]);
const reportingDetail = ref(false);
const reportingReplyStatus = ref(false);
const reportingDetailData = ref({});
const source = ['热线电话', '微信公众号', 'app', '小程序'];
const replyFlag = ['未回复', '已回复'];
const emit = defineEmits(['setTotal']);
const format = value => {
  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
};
// const toDetail = item => {
//   router.push({
//     path: '/analysis_detail',
//     query: {
//       detail: JSON.stringify(item),
//     },
//   });
// };
const getlist = search => {
  if (search.page === 1) {
    listTable.value = [];
    total = -1;
  } else if ((search.page - 1) * search.pageSize >= total) return;

  if (T) T = window.clearTimeout(T);
  T = window.setTimeout(() => {
    getreporting({
      data: search,
    })
      .then(res => {
        listTable.value = res.records || [];
        total = res.total || 0;
        emit('setTotal', total);
        if (T) T = window.clearTimeout(T);
      })
      .catch(() => {
        if (T) T = window.clearTimeout(T);
      });
  }, 200);
};

const deleteBL = item => {
  delreporting({ data: { id: item.row.id } }).then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    });
    listTable.value.splice(item.$index, 1);
  });
};

const lookBL = item => {
  getreportingDetail({ data: { id: item.row.id } }).then(res => {
    reportingDetail.value = true;
    reportingDetailData.value.row = res;
  });
};

const replyBL = item => {
  getreportingDetail({ data: { id: item.row.id } }).then(res => {
    reportingReplyStatus.value = true;
    reportingDetailData.value.row = res;
    reportingDetailData.value.$index = item.$index;
  });
};

const replySave = () => {
  reportingReplyStatus.value = false;
  reportingReply({
    data: {
      clueId: reportingDetailData.value.row.id,
      content: reportingDetailData.value.row.reply || '',
      userName: reportingReplyStatus.value.author || '',
    },
  }).then(() => {
    listTable.value[reportingDetailData.value.$index].replyFlag = 1;
  });
};

const confirm = item => {
  reportingShenhe({ data: { id: item.row.id, status: 1 } }).then(() => {
    ElMessage({
      type: 'success',
      message: '审核通过',
    });
    listTable.value[item.$index].status = 1;
  });
};

const cancel = item => {
  reportingShenhe({ data: { id: item.row.id, status: -1 } }).then(() => {
    ElMessage({
      type: 'success',
      message: '拒绝通过',
    });
    listTable.value[item.$index].status = -1;
  });
};

defineExpose({
  getlist,
});
</script>

<style scoped>
.mainTitle {
  padding: 0 20px;
  position: relative;
  line-height: 60px;
  border-bottom: 1px solid #f5f5f5;
}

.lists {
  padding: 0.5em;
}

.list {
  border-radius: 5px;
  padding: 0.5em;
  cursor: pointer;
  line-height: 1.8em;
  font-size: 14px;
}
.list:hover {
  background-color: rgba(64, 158, 255, 0.1);
}
.list:not(:last-child) {
  border-bottom: 1px dashed #b9c0d3;
}
</style>
<style>
.lists .el-row {
  line-height: 2em;
}
</style>