zfire-newmall-admin/src/views/workOrder/penaltyWorkOrder/index.vue

<template>
  <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
    <template slot-scope="{activeKey, data}">
      <div :style="{
        width: '100%',
        height: activeKey == 'list' ? '100%' : '0px',
        overflow: 'hidden'
      }">
        <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
          :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
          :exportList="exportList" :operation="operation()">
        </template-page>
      </div>
      <div v-if="~['add', 'detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
        <div>
          <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
            <zj-form-module title="客户信息" :showPackUp="false" :form-data="formData" :form-items="basicInfo">
            </zj-form-module>
            <zj-form-module title="产品信息" :showPackUp="false" :form-data="formData" :form-items="product">
            </zj-form-module>
            <zj-form-module title="处罚信息" label-width="100px" :showPackUp="false" :form-data="formData"
              :form-items="pandanxinxi">
            </zj-form-module>
            <zj-form-module title="处置信息" label-width="100px" :showPackUp="false" :form-data="formData"
              :form-items="czpandanxinxi">
            </zj-form-module>
          </zj-form-container>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="data.removeTab">取 消</el-button>
            <el-button v-if="!formData.status || formData.status == 'SAVE'" size="mini" type="primary"
              @click="quedingbaocun(data.removeTab)">保存</el-button>
            <el-button v-if="formData.status == 'SAVE'" size="mini" type="primary"
              @click="quedingshenhe(data.removeTab)">审核</el-button>
          </div>
        </div>
      </div>
    </template>
  </zj-tab-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 basicInfo from "./mixins/basicInfo"
import productColumns from "./mixins/productColumns"
import pandanxinxi from "./mixins/pandanxinxi"
import czpandanxinxi from "./mixins/czpandanxinxi"
import { orderPunishList, orderPunishListExport, orderPunishExamine, orderPunishDelete, orderPunishDetail, orderPunishSave } from "@/api/penaltyWorkOrder";
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin, basicInfo, productColumns, pandanxinxi, czpandanxinxi],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      formData: {
        "address": "",
        "area": "",
        "areaId": "",
        "city": "",
        "cityId": "",
        "disposeOrderBaseId": "",
        "disposeOrderSmallType": "",
        "disposeOrderSmallTypeText": "",
        "disposeWebsitId": "",
        "disposeWebsitName": "",
        "disposeWorkerId": "",
        "disposeWorkerMobile": "",
        "disposeWorkerName": "",
        "examineBy": "",
        "examineRemark": "",
        "examineTime": "",
        "fileUrls": [],
        "id": "",
        "linkName": "",
        "orderBaseId": "",
        "orderSmallType": "",
        "orderSmallTypeText": "",
        "province": "",
        "provinceId": "",
        "punishOrderProducts": [
          {
            "brandId": "",
            "brandName": "",
            "insideCode": "",
            "mainId": "",
            "mainName": "",
            "outCode": "",
            "punishOrderId": "",
            "smallId": "",
            "smallName": "",
            "specsName": "",
          }
        ],
        "punishOrderWorkers": [],
        "remark": "",
        "status": "",
        "street": "",
        "streetId": "",
        "totalAmount": "",
        "userMobile": "",
        "userMobile2": "",
        "userName": "",
        "websitId": "",
        "websitName": "",
      },
    }
  },
  computed: {
    // 更多参数
    moreParameters() {
      return []
    },
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          [
            this.optionsEvensAuth('add', {
              click: () => {
                this.$refs.tabPage.addTab({
                  // 对应显示的模块
                  activeKey: "add",
                  // 唯一标识
                  key: "add",
                  // 页签名称
                  label: "新增",
                  // 打开时事件
                  triggerEvent: () => {
                    this.handleClose()
                    this.$nextTick(() => {
                      this.openForm()
                    })
                  },
                  // 关闭时事件
                  closeEvent: () => { }
                })
              }
            })
          ]
        ]
      ]
    },
  },
  methods: {
    // 列表请求函数
    getList: orderPunishList,
    // 列表导出函数
    exportList: orderPunishListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 关闭
    handleClose() {
      this.$data.formData = this.$options.data().formData
    },
    // 打开弹窗
    openForm() {
      this.getinitlbslist()
      this.getProductSel()
      this.getWebsitList()
      this.getWorkers()
      this.getorderSmallTypeData()
      this.getdisposeWebsitIds()
    },
    // 保存
    quedingbaocun(removeTab) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          orderPunishSave({
            ...this.formData,
            fileUrls: this.formData.fileUrls.map(item => item.url).join(",")
          }).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.$refs.pageRef.refreshList()
            removeTab && removeTab()
            this.handleClose()
          })
        }
      })
    },
    // 审核
    quedingshenhe(removeTab) {
      orderPunishExamine({
        id: this.formData.id,
        status: "OK",
      }).then(res => {
        this.$message({
          type: 'success',
          message: '审核成功'
        })
        this.$refs.pageRef.refreshList()
        removeTab && removeTab()
        this.handleClose()
      })
    },
    // 操作按钮
    operation() {
      return this.operationBtn({
        detail: {
          click: ({ row, index, column }) => {
            this.$refs.tabPage.addTab({
              // 对应显示的模块
              activeKey: "detail",
              // 唯一标识
              key: "detail",
              // 页签名称
              label: "详情",
              // 打开时事件
              triggerEvent: () => {
                this.handleClose()
                this.$nextTick(() => {
                  orderPunishDetail({ id: row.id }).then(res => {
                    Object.assign(this.formData, res.data, {
                      fileUrls: res.data.fileUrls ? res.data.fileUrls.split(",").map(url => ({ url })) : []
                    })
                    this.openForm()
                  })
                })
              },
              // 关闭时事件
              closeEvent: () => { }
            })
          }
        },
        del: {
          prompt: "是否确定删除？",
          conditions: ({ row, index, column }) => {
            return row.status != "OK"
          },
          click: ({ row, index, column }) => {
            orderPunishDelete({ id: row.id }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.$refs.pageRef.refreshList()
            })
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped></style>