zfire-newmall-admin/src/views/secondHandMall/commodityManagement/index.vue

<template>
  <template-page ref="pageRef" :get-list="getList" :export-list="exportList" :column-parsing="columnParsing"
    :more-parameters="moreParameters" :operation="operation()" :operation-column-width="240" :replace-or-not-map="false"
    :optionsEvensGroup="optionsEvensGroup" :tableAttributes="tableAttributes" :tableEvents="tableEvents">
    <div class="cartographer_big">
      <el-dialog title="编辑" width="100%" :modal="false" :visible.sync="visible" :before-close="handleClose">
        <Form v-if="visible" :detail-id="detailId" @back="handleClose" />
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import Form from './form.vue'
import { esGoodsList, esGoodsListExport, esGoodsDel, esGoodsTop, esGoodsBatchUpdateStatus } from '@/api/commodityManagement'
export default {
  components: { TemplatePage, Form },
  mixins: [import_mixin, operation_mixin],
  props: {},
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            this.optionsEvensAuth('batchListing', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选')
                  return
                }
                esGoodsBatchUpdateStatus({
                  ids:this.recordSelected.map(item=>item.id).join(","),
                  status:"ON"
                }).then(res => {
                  this.$message({ type: 'success', message: `设置成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ],
          [
            this.optionsEvensAuth('batchDelist', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选')
                  return
                }
                esGoodsBatchUpdateStatus({
                  ids:this.recordSelected.map(item=>item.id).join(","),
                  status:"OFF"
                }).then(res => {
                  this.$message({ type: 'success', message: `设置成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ]
        ]
      ],
      visible: false,
      detailId: '',
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: []
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '状态',
          key: 'orderType',
          value: '',
          conditions: [
            {
              label: `全部`,
              value: ''
            },
            {
              label: `上架`,
              value: 'ON'
            },
            {
              label: `下架`,
              value: 'OFF'
            },
            {
              label: `已卖出`,
              value: 'SALE'
            }
          ]
        }
      ]
    }
  },
  methods: {
    selectable(row, index) {
      return ["ON", "OFF"].includes(Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0])
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 列表请求函数
    getList(p, cb) {
      if (p.orderType) {
        p.params.push({ param: 'a.status', compare: '=', value: p.orderType })
      }
      cb && cb(p)
      return esGoodsList(p)
    },
    // 列表导出函数
    exportList: esGoodsListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'imgUrl') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row.imgUrl
                ? row.imgUrl
                  .split(',')
                  .map(url => (
                    <el-image src={url} preview-src-list={[url]} fit="fit" style="width:80px;height:80px;" />
                  ))
                : null}
            </div>
          )
        }
      }
      return defaultData
    },
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.detailId = row.id
            this.visible = true
          }
        },
        del: {
          prompt: "是否确定删除？",
          conditions: ({ row, index, column }) => {
            return row.status == "SALE"
          },
          click: ({ row, index, column }) => {
            esGoodsDel({ id: row.id }).then(res => {
              this.$message({ type: 'success', message: `删除成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        },
        topFix: {
          prompt: "是否确定置顶？",
          conditions: ({ row, index, column }) => {
            return !row.isTop
          },
          click: ({ row, index, column }) => {
            esGoodsTop({ id: row.id, isTop: true }).then(res => {
              this.$message({ type: 'success', message: `设置成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        },
        unTopFix: {
          prompt: "是否确定取消置顶？",
          conditions: ({ row, index, column }) => {
            return row.isTop
          },
          click: ({ row, index, column }) => {
            esGoodsTop({ id: row.id, isTop: false }).then(res => {
              this.$message({ type: 'success', message: `设置成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        }
      })
    },
    handleClose(obj) {
      this.detailId = ''
      this.visible = false
      this.$refs.pageRef.refreshList()
      if(obj && obj.detailId){
        this.$nextTick(()=>{
          this.detailId = obj.detailId
          this.visible = true
        })
      }
    }
  }
}
</script>

<style scoped></style>