ss-crm-manage-web/src/views/Clue/Order/Comp/OrderList.vue

<template>
  <div>
    <!-- 搜索工作栏 -->
    <div>
      <el-form :model="searchForm" ref="moreSearchRef" inline label-width="0">
        <template v-if="appStore.getAppInfo?.instanceType == 1">
          <el-form-item>
            <el-select
              v-model="searchForm.signSchool"
              placeholder="选择驾校"
              filterable
              clearable
              @change="changeSchool"
            >
              <el-option
                v-for="item in schoolOptions"
                :key="item.schoolId"
                :label="item.schoolName"
                :value="item.schoolId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.signPlace"
              placeholder="选择场地"
              filterable
              clearable
              :disabled="!searchForm.signSchool"
              @change="changePlace"
            >
              <el-option
                v-for="item in placeOptions"
                :key="item.placeId"
                :label="item.name"
                :value="item.placeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.signClass"
              :disabled="!searchForm.signPlace"
              placeholder="选择班型"
              filterable
              clearable
            >
              <el-option
                v-for="item in classOptions"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              />
            </el-select>
          </el-form-item>
        </template>
        <template v-else-if="appStore.getAppInfo?.instanceType == 2">
          <el-form-item>
            <el-select
              v-model="searchForm.signProduct"
              placeholder="选择成交产品"
              filterable
              @change="searchForm.specsId = undefined"
            >
              <el-option
                v-for="item in prodOptions"
                :key="item.productId"
                :label="item.productName"
                :value="item.productId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.specsId"
              placeholder="选择规格"
              filterable
              :disabled="!searchForm.signProduct"
            >
              <el-option
                v-for="item in specsOptions(searchForm.signProduct)"
                :key="item.specsId"
                :label="item.specsName"
                :value="item.specsId"
              />
            </el-select>
          </el-form-item>
        </template>
      </el-form>
      <Search v-if="!loading" ref="searchRef" :schema="allSchemas.searchSchema" labelWidth="0">
        <template #actionMore>
          <el-button @click="getTableList" v-hasPermi="['clue:order:search']"> 搜索 </el-button>
          <el-button @click="resetQuery" v-hasPermi="['clue:order:reset']"> 重置 </el-button>
        </template>
      </Search>
    </div>
    <!-- 列表 -->
    <SSTable
      v-if="!loading"
      class="mt-20px"
      v-model:tableObject="tableObject"
      :tableColumns="allSchemas.tableColumns"
      @get-list="getTableList"
    >
      <el-table-column
        v-for="item in allSchemas.tableColumns"
        :key="item.field"
        :prop="item.field"
        :label="item.label"
        min-width="120px"
      />
      <el-table-column label="操作" width="200px" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            class="mr-10px"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:detail']"
            @click="handleDetail(scope.row)"
          >
            详情
          </el-button>
          <el-button
            type="primary"
            class="mr-10px"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:after-sale']"
            @click="sellAfter(scope.row)"
          >
            售后
          </el-button>
          <el-button
            type="primary"
            class="mr-10px"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:after-sale-audit']"
          >
            售后审核
          </el-button>
          <el-button
            type="primary"
            class="mr-10px"
            link
            v-if="appStore.getAppInfo?.instanceType == 2"
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:send']"
          >
            发货
          </el-button>
          <el-button
            type="primary"
            class="mr-10px"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:return']"
            @click="feeBack(scope.row)"
          >
            回款
          </el-button>
          <el-button
            type="primary"
            class="mr-10px"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:return-audit']"
          >
            回款确认
          </el-button>
        </template>
      </el-table-column>
    </SSTable>

    <!-- 详情 -->
    <DialogOrder ref="orderDetailDialog" />
  </div>
</template>

<script setup name="ClueOrderList">
import { getSimpleFieldList } from '@/api/clue/orderField'
import * as SignApi from '@/api/clue/sign'
import { getSimpleUserList as getUserOption } from '@/api/system/user'
import { getPlaceList } from '@/api/school/place'
import { getClassTypePage } from '@/api/school/class'
import { getSimpleProductList } from '@/api/mall/product'

import DialogOrder from './DialogOrder.vue'

import { removeNullField } from '@/utils'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

const allSchemas = ref({})

const orderDetailDialog = ref()
const searchRef = ref()
const schoolOptions = ref([])
const allPlaceOptions = ref([])
const prodOptions = ref([])

const specsOptions = computed({
  get() {
    return (prodId) => {
      if (prodId) {
        return prodOptions.value.find((it) => it.productId == prodId).productSpecList
      }
      return []
    }
  }
})

const searchForm = ref({
  signSchool: undefined,
  signPlace: undefined,
  signClass: undefined,
  signProduct: undefined
})

const tableObject = ref({
  tableList: [],
  loading: false,
  total: 1,
  pageSize: 20,
  currentPage: 1
})

const placeOptions = computed(() => {
  return allPlaceOptions.value.filter((it) => it.schoolId == searchForm.value.signSchool)
})

function resetQuery() {
  searchForm.value = {
    signSchool: undefined,
    signPlace: undefined,
    signClass: undefined,
    signProduct: undefined
  }
  searchRef.value.reset()
  tableObject.value.currentPage = 1
  getTableList()
}
// 查询
async function getTableList() {
  // 查询
  tableObject.value.loading = true
  try {
    const queryParams = await searchRef.value.getFormModel()
    const params = {
      ...queryParams,
      ...searchForm.value,
      pageNo: tableObject.value.currentPage,
      pageSize: tableObject.value.pageSize
    }
    const data = await SignApi.getSignPage(removeNullField(params))
    tableObject.value.tableList = data.list.map((it) => ({ ...it, ...it.diyParams }))
    tableObject.value.total = data.total
  } finally {
    tableObject.value.loading = false
  }
}

const loading = ref(true)
async function getCurdSchemas() {
  loading.value = true
  try {
    const data = await getSimpleFieldList()
    data.forEach((elem) => {
      if (elem.field == 'createUser') {
        elem.search.options = userOptions.value
      }
    })
    allSchemas.value = useCrudSchemas(data).allSchemas
  } finally {
    loading.value = false
    nextTick(() => {
      getTableList()
    })
  }
}

// 详情
function handleDetail(row) {
  orderDetailDialog.value.open(row.clueId, row.signId)
}

// 售后
function sellAfter() {
  // 方法体
}

function changeSchool() {
  searchForm.value.signPlace = undefined
  searchForm.value.signClass = undefined
}

function changePlace() {
  searchForm.value.signClass = undefined
  getClassTypeOptions()
}

const classOptions = ref([])
async function getClassTypeOptions() {
  const data = await getClassTypePage({ placeId: searchForm.value.signPlace })
  classOptions.value = data.list
}

function getOptions() {
  if (appStore.getAppInfo?.instanceType == 1) {
    // 驾校
    getPlaceList().then((data) => {
      schoolOptions.value = data.schoolList
      allPlaceOptions.value = data.placeList
    })
  } else {
    // 产品
    getSimpleProductList().then((data) => {
      prodOptions.value = data
    })
  }
}

const userOptions = ref([])
onMounted(() => {
  getUserOption().then((data) => {
    userOptions.value = data
    getCurdSchemas()
  })
  getOptions()
})
</script>

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