webb2b/src/packages/pc/views/search/diamond/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.cutTypeList" v-model="formData.zscuttype" 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="tableColumns" :show-toolbar="false" :loading="loading">
            <!-- 价格 -->
            <template #price="{ row }">
                {{ row.zscurrencytypedisplayunit + formatDecimal(row.price) }}
            </template>
            <!-- 克拉单价 -->
            <template #fixedprice="{ row }">
                {{ row.zscurrencytypedisplayunit + formatDecimal(row.fixedprice) }}
            </template>
            <!-- 操作 -->
            <template #operate="{ row }">
                <app-auth-operation type="dropdown" :menus="handleOperateButtons(row)" :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 { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { formatDecimal } from '@/filters'
import { loginStore, favoriteStore } from '@/stores'
import { useSearch } from '@/business/search'
import { Category } from '@/constants/diamond'
import { useComposeTable } from '@pc/components/base/table'
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, dataList, total, pageIndex, pageSize, formData, enums, getSellOrderList, onSearch, onReset } = useSearch(Category.Diamond)
const { tableColumns } = useComposeTable<Ermcp.SellOrderSearchRsp>({ rowKey: 'wrtradeorderid', columnKey: 'listing_sellorder' })
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()
                }
            }
        }
    }],
}

// 未收藏的卖委托有收藏按钮
const handleOperateButtons = (row: Ermcp.SellOrderSearchRsp) => {
    if (favoriteStore.actions.hasFavorite(row.goodsno) || row.userid === loginStore.getters.userId) {
        return ['search_diamond_details']
    }
    return ['search_diamond_details', 'search_diamond_favorite']
}

getSellOrderList().catch((err) => ElMessage.error(err))
</script>