add:评价列表

cloudroam

2024-10-09 ecdfa6841886c71f349d4d7dfa634dd4d7100e88

add:评价列表

 components/order/evaluation-table.vue

对比新文件
@@ -0,0 +1,145 @@
<template>
  <div class="after-sale-table">
    <div class="table-header">
      <div class="table-th" style="margin-left: 20px">商品名称</div>
      <div class="table-th ">订单编号</div>
      <div class="table-th">评价星级</div>
      <div class="table-th">供应商信息</div>
      <div class="table-th">评价内容</div>
      <div class="table-th" style="margin-left: 20px">买家</div>
      <div class="table-th">评价时间</div>
      <div class="table-th" style="margin-left: 20px">操作</div>
    </div>
    <div v-for="item in list" :key="item.id" class="table-item">
      <div class="table-body">
        <div class="table-td">
          <div class="flex">
            <el-bus-image :src="item.flowerCover" class="w-60 h-60 mr-8" />
            <div class="leading-20">
              <div class="text-14 font-bold">
                {{ item.flowerName }}
              </div>
              <div class="leading-20">
                <span>规格：{{ item.flowerUnit }}</span>
              </div>
              <div class="leading-20">
                <span>等级：{{ item.flowerLevel }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="table-td">
          <div class="leading-20">{{ item.orderNo }}</div>
        </div>
        <div class="table-td">
          <div class="leading-20">{{item.commentGrade }}星</div>
        </div>
        <div class="table-td">
          <div class="leading-20">{{ item.supplierName }}[ID:{{ item.supplierId }}]</div>
        </div>

        <div class="table-td">
          <div class="leading-20">{{ item.comment }}</div>
        </div>

        <div class="table-td">
          <div class="leading-20">
            <div class="leading-20">
              <span>UID： {{ item.customerName }}</span>
            </div>
            <div class="leading-20">
              <span>昵称： {{ item.customerName }}</span>
            </div>

          </div>
        </div>

        <div class="table-td">
          <div class="leading-20">{{ item.createTime }}</div>
        </div>

        <div class="table-td !flex-none w-180 flex items-center">
          <el-button type="text" @click="onDetail(item)">查看</el-button>
          <el-button  v-if="item.showFlag == '1'" type="text" @click="onShow(item)" >显示</el-button>
          <el-button  v-if="item.showFlag == '0'" type="text" @click="onHide(item)" >隐藏</el-button>
          <el-button  type="text" @click="onHandle(item)" >回复</el-button>
          <el-button  type="text" @click="onDelete(item)" >删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    onDetail(item) {
      this.$emit('detail', item)
    },
    onHandle(item) {
      this.$emit('handle', item)
    },
    onDelete(item) {
      this.$emit('delete', item)
    },
    onShow(item) {
      this.$emit('show', item)
    },
    onHide(item) {
      this.$emit('hide', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.after-sale-table {
  .table-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: $main-title-color;
    background-color: #f4f4f5;
    .table-th {
      flex: 1;
      height: 45px;
      line-height: 45px;
      font-weight: bold;
    }
  }
  .table-item {
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    &__title {
      height: 35px;
      line-height: 35px;
      background-color: #f4f4f5;
      font-size: 14px;
      color: $main-title-color;
      padding: 0 10px;
      & > span {
        margin-right: 10px;
      }
    }
    .table-body {
      display: flex;
      align-items: stretch;
      font-size: 12px;
      color: $main-title-color;
      .table-td {
        flex: 1;
        padding: 15px 10px;
        &:not(:last-child) {
          border-right: 1px solid #eee;
        }
      }
    }
  }
}
</style>

 pages/order/evaluation/index.vue

对比新文件
@@ -0,0 +1,286 @@
<template>
  <el-bus-crud ref="crud" v-bind="tableConfig">
    <template #table="{ list }">
      <template v-if="list && list.length > 0">
        <evaluation-table :list="list" @detail="onDetail" @handle="onHandle" @delete="onDelete" @show="onShow" @hide="onHide"/>
      </template>
      <el-bus-empty v-else />
    </template>
  </el-bus-crud>
</template>

<script>
import EvaluationTable from '@/components/order/evaluation-table'
export default {
  components: {
    EvaluationTable,
  },
  data() {
    return {
      tableConfig: {
        evaluationId: null,
        url: 'flower/api/v2/flower-comment/page',
        hasNew: false,
        hasEdit: false,
        hasDelete: true,
        operationAttrs: {
          width: 150,
          fixed: 'right',
        },

        searchForm: [
          {
            type: 'row',
            items: [
              { label: '订单编号', id: 'orderId', type: 'input' },
              { label: '商品名称', id: 'flowerName', type: 'input' },
              {
                label: '评价星级',
                id: 'commentGrade',
                type: 'bus-select-dict',
                el: {
                  code: 'comment_grade',
                  clearable: true,
                  style: 'width:100%',
                },
              },
              {
                label: '申请日期',
                component: 'el-bus-date-range',
                id: 'createDateBeginStr',
                commonFormat: true,
                commonFormatProps: ['createDateBeginStr', 'createDateEndStr'],
                customClass: 'in-bus-form',
              },
            ],
          },
        ],
        form: [
          // { label: '评价内容1', id: 'comment', type: 'input' },
        ],
        extraDialogs: [
          {
            title: '评价详情',
            readonly: true,
            dialogAttrs: {
              width: '70%',
            },
            form: [
              {
                label: '订单编号：',
                id: 'orderId',
                type: 'input',
                readonly: true,
              },
              {
                label: '商品名称：',
                id: 'flowerName',
                type: 'input',
                readonly: true,
              },
              {
                label: '商品封面图：',
                id: 'flowerCover',
                type: 'bus-upload',
                readonly: true,
                el: {
                  listType: 'picture-card',
                  limitSize: 2,
                },
              },
              {
                label: '商品等级：',
                id: 'flowerLevel',
                type: 'input',
                readonly: true,
              },
              {
                label: '商品规格：',
                id: 'flowerUnit',
                type: 'input',
                readonly: true,
              },
              {
                label: '供应商信息：',
                id: 'supplierName',
                type: 'input',
                readonly: true,
              },
              {
                label: '用户信息：',
                id: 'customerName',
                type: 'input',
                readonly: true,
              },
              {
                label: '评价星级：',
                id: 'commentGrade',
                type: 'input',
                readonly: true,
              },
              {
                label: '评论显示状态：',
                id: 'showFlag',
                type: 'input',
                readonly: true,
              },
              {
                label: '评价内容：',
                id: 'comment',
                type: 'input',
                readonly: true,
              },
              {
                label: '回复内容：',
                id: 'replayContent',
                type: 'input',
                readonly: true,
              },
              {
                label: '评价时间：',
                id: 'createTime',
                type: 'input',
                readonly: true,
              },
              {
                label: '评价图片：',
                id: 'commentImages',
                type: 'image',
                readonly: true,
              },
              ]
          },
          {
            title: '回复评价',
            form: [
              {
                label: '评价内容：',
                id: 'comment',
                type: 'input',
                readonly: true,
              },
              {
                label: '回复内容：',
                id: 'replayContent',
                type: 'input',
                el: {
                  rows: 6,
                  type: 'textarea',
                },
                rules: {
                  required: true,
                  message: '请输入回复内容',
                  trigger: 'blur',
                },
              },
            ],
            atConfirm: async (val) => {
              const { code } = await this.$elBusHttp.request(
                'flower/api/v2/flower-comment/replay/' + this.evaluationId + '',
                {
                  method: 'put',
                  data: val,
                }
              )
              if (code === 0) {
                this.$message.success('回复成功')
              }
            },
          },
        ],
      },
    }
  },
  head() {
    return {
      title: '评价列表',
    }
  },
  methods:{
     onHandle(item) {
        this.evaluationId = item.id
        this.$refs.crud.$refs.extraDialog[1].show({
          comment: item.comment,
        })
    },
     async onDetail(item) {
       const {code, data} = await this.$elBusHttp.request(
         'flower/api/v2/flower-comment/list',
         {params: {id: item.id}}
       )
       if (code === 0) {
         console.log(data);
         console.log(data[0].orderId);
         this.$refs.crud.$refs.extraDialog[0].show(data[0])

       }
     },
    async onDelete(item) {
      try {
        await this.$elBusUtil.confirm(
          `确定要删除这个商品吗？`
        )
        const {code, data} = await this.$elBusHttp.request(
          'flower/api/v2/flower-comment/' + item.id + '',
          {
            method: 'delete',
          }
        )
        if (code === 0) {
          this.$message.success(`删除成功`)
          this.$refs.crud.getList()
        } else {
          return false
        }
      } catch (error) {
        return false
      }
    },
    async onShow(item) {
      try {
        await this.$elBusUtil.confirm(
          `确定要显示这个评价吗？`
        )
        const {code} = await this.$elBusHttp.request(
          'flower/api/v2/flower-comment/show/' + item.id + '',
          {
            method: 'put',
            data: {showFalg: 0},
          }
        )
        if (code === 0) {
          this.$message.success(`显示成功`)
          this.$refs.crud.getList()
        }
      } catch (e) {
        return false
      }
    },

    async onHide(item) {
      try {
        await this.$elBusUtil.confirm(
          `确定要隐藏这个评价吗？`
        )
        const {code} = await this.$elBusHttp.request(
          'flower/api/v2/flower-comment/show/' + item.id + '',
          {
            method: 'put',
            data: {showFalg: 1},
          }
        )
        if (code === 0) {
          this.$message.success(`隐藏成功`)
          this.$refs.crud.getList()
        }
      } catch (e) {
        return false
      }
    }
  }
}
</script>

<style scoped>

</style>