webb2b/src/packages/pc/views/search/fancy/index.vue

<!-- 钻石搜索-单颗彩钻 -->
<template>
    <app-view>
        <template #header>
            <el-form ref="formRef" label-width="80px" :rules="formRules">
                <el-form-item label="形状">
                    <app-multiple :data-list="enums.shapeTypeList" v-model="formData.zsshapetype" checkbox />
                </el-form-item>
                <el-form-item label="颜色">
                    <app-multiple :data-list="enums.colorTypeList" v-model="formData.zscolortype" checkbox />
                </el-form-item>
                <el-form-item label="净度">
                    <app-multiple :data-list="enums.clarityTypeList" v-model="formData.zsclaritytype" checkbox />
                </el-form-item>
                <el-form-item label="对称">
                    <app-multiple :data-list="enums.symmetryTypeList" v-model="formData.zssymmetrytype" checkbox />
                </el-form-item>
                <el-form-item label="抛光">
                    <app-multiple :data-list="enums.polishTypeList" v-model="formData.zspolishtype" checkbox />
                </el-form-item>
                <el-form-item label="荧光">
                    <app-multiple :data-list="enums.fluorescenceTypeList" v-model="formData.zsfluorescencetype"
                        checkbox />
                </el-form-item>
                <el-form-item label="仓库">
                    <el-select v-model="formData.warehouseid" clearable>
                        <el-option :label="item.warehousename" :value="item.autoid"
                            v-for="(item, index) in warehouseList" :key="index" />
                    </el-select>
                </el-form-item>
                <el-form-item label="货币">
                    <app-multiple :data-list="enums.currencyTypeList" v-model="formData.zscurrencytype" checkbox />
                </el-form-item>
                <el-form-item label="证书">
                    <app-multiple :data-list="enums.certTypeList" v-model="formData.zscerttype" checkbox />
                </el-form-item>
                <el-form-item label="克拉重量" prop="weight">
                    <div class="el-form-item--col">
                        <el-input-number placeholder="从" v-model="formData.weight1" :precision="2" :controls="false" />
                        <span>-</span>
                        <el-input-number placeholder="至" v-model="formData.weight2" :precision="2" :controls="false" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="onSearch">搜索</el-button>
                    <el-button :disabled="loading" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </template>
        <app-table :data="dataList" v-model:columns="columns" :show-header="false" :loading="loading">
            <template #operate="{ row }">
                <app-auth-operation :options="{ selectedRow: row }" @closed="getSellOrderList" />
            </template>
            <template #footer>
                <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                    @change="getSellOrderList" />
            </template>
        </app-table>
    </app-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useSearch } from '@/business/search'
import { Category } from '@/constants/diamond'
import AppMultiple from '@pc/components/base/multiple/index.vue'
import AppTable from '@pc/components/base/table/index.vue'
import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
import AppPagination from '@pc/components/base/pagination/index.vue'

const { loading, warehouseList, dataList, columns, total, pageIndex, pageSize, formData, enums, getSellOrderList, onSearch, onReset } = useSearch(Category.Fancy)
const formRef = ref<FormInstance>()

const formRules: FormRules = {
    weight: [{
        validator: (rule, value, callback) => {
            const { weight1 = 0, weight2 = 0 } = formData.value
            if (weight1 && weight2) {
                if (weight1 > weight2) {
                    callback(new Error('克拉重量应该从小到大'))
                } else {
                    callback()
                }
            } else {
                if ((!weight1 || !weight2) && (weight1 || weight2)) {
                    callback(new Error('克拉重量不能小于 0'))
                } else {
                    callback()
                }
            }
        }
    }],
}

getSellOrderList()
</script>