|
|
@@ -0,0 +1,420 @@
|
|
|
+<script setup>
|
|
|
+import { interactiveInterface } from '@/api/api.js';
|
|
|
+import mPage from '@/components/mPage.vue'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+import { nextTick, reactive, ref } from 'vue';
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+
|
|
|
+const pageState = reactive({
|
|
|
+ searchParams: {
|
|
|
+ CreateDate: '',
|
|
|
+ ProductType: '',
|
|
|
+ KeyWord: '',
|
|
|
+ CurrentIndex: 1,
|
|
|
+ PageSize: 10
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ dataList: [],
|
|
|
+ boardArray: [],
|
|
|
+ // 弹窗标题
|
|
|
+ dialogTitle: '',
|
|
|
+ //---------------留言详情弹窗
|
|
|
+ // 是否显示
|
|
|
+ isDetailShow: false,
|
|
|
+ detailForm: {},
|
|
|
+ // ----------------留言回复弹窗
|
|
|
+ // 是否显示
|
|
|
+ isReplayShow: false,
|
|
|
+ replayForm: {
|
|
|
+ CommentId: '',
|
|
|
+ content: ''
|
|
|
+ },
|
|
|
+ expandRow: {}
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+// 切换页码
|
|
|
+function pageChange(page) {
|
|
|
+ pageState.searchParams.CurrentIndex = page
|
|
|
+ getMessageList()
|
|
|
+}
|
|
|
+// 搜索
|
|
|
+function search() {
|
|
|
+ pageState.searchParams.CurrentIndex = 1
|
|
|
+ getMessageList()
|
|
|
+}
|
|
|
+// 获取留言列表
|
|
|
+const messageTable = ref(null)
|
|
|
+function getMessageList(option = '') {
|
|
|
+ // option 操作 expand展开对应行
|
|
|
+ interactiveInterface.getAllBoardMessage(pageState.searchParams).then(res => {
|
|
|
+ pageState.dataList = res.Data.List || []
|
|
|
+ pageState.total = res.Data.Paging.Totals || 0
|
|
|
+ if (option == 'expand') {
|
|
|
+ nextTick(() => {
|
|
|
+ messageTable.value?.toggleRowExpansion(pageState.expandRow, true)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+//获取板块列表
|
|
|
+function getProductionList() {
|
|
|
+ interactiveInterface.getProductList().then(res => {
|
|
|
+ pageState.boardArray = [{ ProductName: '全部', ProductType: '' }, ...res.Data]
|
|
|
+ })
|
|
|
+}
|
|
|
+// // 刷新列表
|
|
|
+// refreshList(){
|
|
|
+// this.getMessageList()
|
|
|
+// },
|
|
|
+// 置顶/取消置顶
|
|
|
+function topOption(row) {
|
|
|
+ interactiveInterface.messageTop({ CommentId: row.CommentId }).then(res => {
|
|
|
+ row.IsTop = res.Data.IsTop
|
|
|
+ ElMessage.success('操作成功')
|
|
|
+ })
|
|
|
+}
|
|
|
+// 留言详情
|
|
|
+const replayForm = ref(null)
|
|
|
+function messageDetail(row) {
|
|
|
+ // console.log(row);
|
|
|
+ pageState.dialogTitle = '留言人详情'
|
|
|
+ pageState.detailForm = row
|
|
|
+ pageState.isDetailShow = true
|
|
|
+}
|
|
|
+// 回复
|
|
|
+function replayMessage(row) {
|
|
|
+ pageState.dialogTitle = '留言回复'
|
|
|
+ pageState.replayForm = {
|
|
|
+ CommentId: row.CommentId,
|
|
|
+ content: ''
|
|
|
+ }
|
|
|
+ pageState.expandRow = row;
|
|
|
+ replayForm.value?.clearValidate()
|
|
|
+ pageState.isReplayShow = true
|
|
|
+}
|
|
|
+// 提交
|
|
|
+function submit() {
|
|
|
+ replayForm.value?.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ interactiveInterface.messageReplay(pageState.replayForm).then(res => {
|
|
|
+ if (res.Ret == 200) {
|
|
|
+ ElMessage.success('回复成功')
|
|
|
+ pageState.isReplayShow = false
|
|
|
+ getMessageList('expand')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 删除操作
|
|
|
+function deleteOption(row) {
|
|
|
+ // console.log(row);
|
|
|
+ let text = row.ReplyCommentId ? '回复' : '留言'
|
|
|
+ let productType = row.ProductType ? row.ProductType
|
|
|
+ : row.ReplyCommentId ? 1 : ''
|
|
|
+ ElMessageBox.confirm(text + '删除后不可恢复，确定删除吗？', {
|
|
|
+ confirmText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ customClass: 'warning-outline-icon',
|
|
|
+ iconClass: 'el-icon-warning-outline'
|
|
|
+ }).then(res => {
|
|
|
+ interactiveInterface.messageDelete({ CommentId: row.CommentId, ProductType: productType }).then(res => {
|
|
|
+ if (res.Ret == 200) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getMessageList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(() => { })
|
|
|
+}
|
|
|
+// 合并单元格
|
|
|
+function spanMethod({ row, rowIndex, column, columnIndex }) {
|
|
|
+ if ((!row.Title) && (!row.ProductType)) {
|
|
|
+ if (columnIndex == 3) {
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 2
|
|
|
+ }
|
|
|
+ } else if (columnIndex == 4) {
|
|
|
+ return {
|
|
|
+ rowspan: 1,
|
|
|
+ colspan: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function initPage() {
|
|
|
+ getMessageList()
|
|
|
+ getProductionList()
|
|
|
+}
|
|
|
+initPage()
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div id="messageManage-container">
|
|
|
+ <div class="search-zone">
|
|
|
+ <div class="search-zone-left">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="pageState.searchParams.CreateDate"
|
|
|
+ placeholder="留言时间"
|
|
|
+ @change="search"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 248px; margin-right: 48px"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-select
|
|
|
+ v-model="pageState.searchParams.ProductType"
|
|
|
+ placeholder="板块"
|
|
|
+ @change="search"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="item.ProductName"
|
|
|
+ :value="item.ProductType"
|
|
|
+ v-for="item in pageState.boardArray"
|
|
|
+ :key="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="search-zone-right">
|
|
|
+ <el-input
|
|
|
+ v-model="pageState.searchParams.KeyWord"
|
|
|
+ placeholder="留言内容"
|
|
|
+ @input="search"
|
|
|
+ style="width: 230px"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="pageState.dataList"
|
|
|
+ border
|
|
|
+ row-key="CommentId"
|
|
|
+ :tree-props="{ children: 'ReplyList' }"
|
|
|
+ :span-method="spanMethod"
|
|
|
+ ref="messageTable"
|
|
|
+ >
|
|
|
+ <el-table-column label="留言内容" prop="Content">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.Content }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="时间"
|
|
|
+ prop="CreateTime"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="留言人" prop="RealName" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span
|
|
|
+ style="color: #409eff; cursor: pointer"
|
|
|
+ @click="messageDetail(row)"
|
|
|
+ v-if="row.RealName"
|
|
|
+ >{{ row.RealName }}</span
|
|
|
+ >
|
|
|
+ <span v-else>{{ row.AdminName || "--" }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="来源"
|
|
|
+ prop="Title"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ row.Title }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="板块"
|
|
|
+ prop="ProductType"
|
|
|
+ show-overflow-tooltip
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{
|
|
|
+ pageState.boardArray[row.ProductType]
|
|
|
+ ? pageState.boardArray[row.ProductType].ProductName
|
|
|
+ : ""
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="table-option">
|
|
|
+ <template v-if="row.ProductType == 1">
|
|
|
+ <span @click="topOption(row)" v-if="row.IsTop == 0">置顶</span>
|
|
|
+ <span @click="topOption(row)" v-else>取消置顶</span>
|
|
|
+ </template>
|
|
|
+ <span @click="replayMessage(row)" v-if="row.ProductType == 1"
|
|
|
+ >回复</span
|
|
|
+ >
|
|
|
+ <span @click="deleteOption(row)" style="color: #b72e18">删除</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div style="padding: 100px 0">
|
|
|
+ <img
|
|
|
+ src="~@/assets/img/cus_m/nodata.png"
|
|
|
+ style="display: block; width: 128px; height: 128px; margin: 0 auto"
|
|
|
+ />
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <div style="height: 40px; margin-top: 10px; padding: 0 20px">
|
|
|
+ <m-page
|
|
|
+ :page_no="pageState.searchParams.CurrentIndex"
|
|
|
+ :pageSize="10"
|
|
|
+ :total="pageState.total"
|
|
|
+ @handleCurrentChange="pageChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 留言详情弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.isDetailShow"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ @close="pageState.isDetailShow = false"
|
|
|
+ width="568px"
|
|
|
+ draggable
|
|
|
+ center
|
|
|
+ :title="pageState.dialogTitle"
|
|
|
+ >
|
|
|
+ <el-form :model="pageState.detailForm" label-width="105px">
|
|
|
+ <el-form-item label="留言内容：" id="content-form-item">
|
|
|
+ <span>{{ pageState.detailForm.Content }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="留言人姓名：">
|
|
|
+ {{ pageState.detailForm.RealName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="公司名称：">
|
|
|
+ {{ pageState.detailForm.CompanyName || "--" }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="客户状态：">
|
|
|
+ {{ pageState.detailForm.CompanyStatus || "--" }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属销售：">
|
|
|
+ {{ pageState.detailForm.SellerName || "--" }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ @click="pageState.isDetailShow = false"
|
|
|
+ type="primary"
|
|
|
+ style="height: 40px; width: 224px"
|
|
|
+ >知道了</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 留言回复弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.isReplayShow"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ @close="pageState.isReplayShow = false"
|
|
|
+ width="568px"
|
|
|
+ draggable
|
|
|
+ center
|
|
|
+ :title="pageState.dialogTitle"
|
|
|
+ >
|
|
|
+ <el-form :model="pageState.replayForm" ref="replayForm">
|
|
|
+ <el-form-item
|
|
|
+ :rules="[
|
|
|
+ { required: true, message: '回复内容不能为空', trigger: 'blur' },
|
|
|
+ ]"
|
|
|
+ prop="content"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="pageState.replayForm.content"
|
|
|
+ placeholder="请输入回复"
|
|
|
+ type="textarea"
|
|
|
+ resize="none"
|
|
|
+ :show-word-limit="true"
|
|
|
+ maxlength="150"
|
|
|
+ rows="10"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 注：至多输入150字，超出部分不予显示
|
|
|
+ </span>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div style="margin-top: ;20px">
|
|
|
+ <el-button
|
|
|
+ @click="submit"
|
|
|
+ type="primary"
|
|
|
+ style="width: 132px; height: 40px"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ @click="pageState.isReplayShow = false"
|
|
|
+ style="width: 132px; height: 40px"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#messageManage-container {
|
|
|
+ background-color: white;
|
|
|
+ padding: 18px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: calc(100vh - 110px);
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ .search-zone {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 21px;
|
|
|
+ }
|
|
|
+ .table-option {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+#content-form-item {
|
|
|
+ .el-form-item__label,
|
|
|
+ .el-form-item__content {
|
|
|
+ line-height: normal;
|
|
|
+ }
|
|
|
+}
|
|
|
+#messageManage-container {
|
|
|
+ .el-table__indent {
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+ .el-table__placeholder {
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.warning-outline-icon {
|
|
|
+ .el-icon-warning-outline {
|
|
|
+ color: #e6a23c;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
