forestry-wx/src/plant/processing/processing-index/index.vue

<template>
    <z-paging ref="paging" v-model="list" bgColor="#f7f7f7" @query="query" hide-no-more-inside>
        <template #top>
            <ut-navbar title="产地加工" :fixed="false"> </ut-navbar>
        </template>
        <template>
            <view class="d-flex a-c pd-24 pb-0 bg-#f7f7f7">
                <view class="min-w-220 flex1">
                    <ut-action-sheet v-model="form.processType" :tabs="[{ label: '全部', value: '' }, ...pt_process_type]" @change="onRefresh" title="选择原料类型">
                        <view class="d-flex search-select-item a-c">
                            <view class="flex1 ov-hd f-s-28 c-333 text-center f-w-5 w-s-no d-flex a-c j-c">
                                <view class="w-s-no">{{ selectDictLabel(pt_process_type, form.processType) || '全部' }}</view>
                                <template v-for="(item, index) in processCountList" :key="index">
                                    <view class="" v-if="form.processType == item?.type">({{ item?.num }})</view>
                                </template>
                            </view>
                            <up-icon size="24rpx" color="#333" name="arrow-down-fill" class="mr-5"></up-icon>
                        </view>
                    </ut-action-sheet>
                </view>
                <view class="h-86 pl-20 w-100%">
                    <ut-search ref="searchRef" v-model="form.keyword" @search="changeSeach" @change="changeSeach" margin="0" :border="false" placeholder="搜药材名、批号" bgColor="#fff" height="86rpx" borderRadius="10rpx"></ut-search>
                </view>
            </view>
            <view class="pd-24">
                <up-swipe-action>
                    <up-swipe-action-item v-for="(item, index) in list" :key="index" :name="item?.id" :options="swipeOptions" class="mb-16" @click="handleSwipeClick">
                        <template #default>
                            <view class="bg-#fff b-radius pd-24 p-rtv">
                                <view v-if="+item?.processType == 1 && +item?.processMedType == 1" class="bg-#91C747 c-#fff f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 16rpx 0 16rpx 0; width: max-content; position: absolute; top: 0rpx; left: 0rpx">种子初加工</view>
                                <view v-if="+item?.processType == 1 && +item?.processMedType == 2" class="bg-#C7A262 c-#fff f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 16rpx 0 16rpx 0; width: max-content; position: absolute; top: 0rpx; left: 0rpx">药材初加工</view>
                                <view v-if="+item?.processType == 2" class="bg-#37A954 c-#fff f-w-5 pd-10 pt-4 pb-4 f-s-20" style="border-radius: 16rpx 0 16rpx 0; width: max-content; position: absolute; top: 0rpx; left: 0rpx">趁鲜切制</view>
                                <view v-if="item?.processingDate || item?.processingDateEnd" class="d-flex a-c j-ed">
                                    <view class="c-#999 f-s-24">{{ item?.processingDate }} 至 {{ item?.processingDateEnd }}</view>
                                </view>
                                <view class="" @click="gotodetaillist(item)">
                                    <view class="mb-10 d-flex a-c">
                                        <view class="">
                                            <span v-if="item?.variety" class="f-s-34 c-#333 f-w-500 mr-10">{{ item?.variety }}</span>
                                            <span v-else class="f-s-34 c-#333 f-w-500 mr-10">{{ item?.medicineName }}(鲜制)</span>
                                            <span class="f-s-24 c-#666" v-if="+item?.processMedType == 1">{{ selectDictLabel(pt_stock_type, item?.processMedType) }}</span>
                                        </view>
                                        <view class="flex1"></view>
                                        <up-icon name="arrow-right" size="26rpx"></up-icon>
                                    </view>
                                    <view class="pd2-4-0 f-s-28">
                                        <span class="c-#666">加工批号：</span>
                                        <span class="c-#333 f-w-500">{{ item?.processCode }}</span>
                                    </view>
                                    <view v-if="+item?.processType == 1" class="pd2-4-0 f-s-28">
                                        <span class="c-#666">执行标准：</span>
                                        <span class="c-#333 f-w-500">{{ selectDictLabel(pt_standard_type, item?.standardType) }}</span>
                                        <span class="c-#666" v-if="item?.standardDetailName">({{ item?.standardDetailName }})</span>
                                    </view>
                                    <view v-else class="pd2-4-0 f-s-28">
                                        <span class="c-#666">执行标准：</span>
                                        <span class="c-#666" v-if="item?.standardDetailName">{{ item?.standardDetailName }}</span>
                                    </view>
                                    <view class="pd2-4-0 f-s-28">
                                        <span class="c-#666">加工工艺：</span>
                                        <template v-for="(items, indexs) in item?.ptech?.split(',')" v-if="item?.ptech" :key="indexs">
                                            <span v-if="indexs !== 0" class="c-#999 f-s-32 ml-10 mr-10">→ </span>
                                            <span class="f-s-32">{{ items }}</span>
                                        </template>
                                        <template v-else>
                                            <span class="c-#999 f-s-32">-</span>
                                        </template>
                                    </view>
                                    <view class="pd2-4-0 f-s-28">
                                        <span class="c-#666">加工负责人：</span>
                                        <span class="c-#333 f-w-500">{{ item?.contactName }}</span>
                                    </view>
                                </view>
                                <Output :data="item" />
                            </view>
                        </template>
                    </up-swipe-action-item>
                </up-swipe-action>
            </view>
        </template>
        <template #empty>
            <view class="d-flex flex-cln a-c">
                <ut-empty class="mg-at" color="#ccc" size="28rpx" image="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/noEmptyBase.png">暂无加工任务</ut-empty>
                <text class="c-#ccc f-s-28">点击下方按钮去添加吧～</text>
            </view>
        </template>
        <template #bottom>
            <ut-tabar activeTab="processing"></ut-tabar>
        </template>
    </z-paging>
    <ut-suspension v-if="sus?.left" :imageWidth="60" :imageHeight="60" :x="sus?.left" :y="sus?.bottom" :inertia="false" :snap-threshold="40">
        <image src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/common/btn_add_logo.png" mode="widthFix" class="w-120 h-120" @click="showDeleteDialog = true"></image>
    </ut-suspension>
    <ut-confirm-dialog v-model:show="showDeleteDialog" width="80vw" title="请选择要创建的任务类型" :confirmText="'确认选择'" :cancelText="'取消'" @confirm="handlechoseConfirm" @cancel="handleDeleteCancel">
        <view class="" v-for="item in pt_process_type" :key="item?.value">
            <view style="border: 1rpx solid" :style="{ backgroundColor: item?.value == basetype ? '#EBF6EE' : '#f7f7f7', borderColor: item?.value == basetype ? '#37A954' : 'transparent' }" class="pr-30 d-flex a-c mb-20 radius-100" @click="handlechose(item.value)">
                <view class="radius-50% mg-8 bg-#F0F0F0" v-if="item?.value == '1'">
                    <up-avatar size="90rpx" src="/static/images/plant/processing/processType_initial.png"></up-avatar>
                </view>
                <view class="radius-50% mg-8 bg-#F0F0F0" v-if="item?.value == '2'">
                    <up-avatar size="90rpx" src="/static/images/plant/processing/processType_fresh.png"></up-avatar>
                </view>
                <view class="c-#333 f-s-34">
                    {{ item?.label }}
                </view>
                <view class="flex1"></view>
                <view class="d-flex">
                    <img v-if="basetype === item.value" class="w-30 h-30" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images-plt/plant/chooseSuccessfully.png" mode="widthFix" alt="" />
                </view>
            </view>
        </view>
    </ut-confirm-dialog>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
import Output from './models/output.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pt_process_type, pt_stock_type, pt_standard_type } = toRefs<any>(proxy?.useDict('pt_process_type', 'pt_stock_type', 'pt_standard_type'));
const sus = ref({
    left: 0,
    bottom: 0,
});
const systemInfo = uni.getSystemInfoSync();
const windowInfo = uni.getWindowInfo();
const safeAreaBottom = windowInfo.safeAreaInsets.bottom;
sus.value.left = systemInfo.windowWidth - 10;
sus.value.bottom = systemInfo.windowHeight - 200;
const showDeleteDialog = ref(false);
const basetype = ref();
const processCountList = ref<any>();
const handlechose = (item: string) => {
    basetype.value = item;
};
// 处理取消
const handleDeleteCancel = () => {
    showDeleteDialog.value = false;
    basetype.value = '';
};
const handlechoseConfirm = () => {
    if (!basetype.value) {
        uni.showToast({
            title: '请选择要创建的任务类型',
            icon: 'none',
            duration: 2000,
        });
        return;
    }
    uni.$u.route({ type: 'navigateTo', url: '/plant/processing/processing-create/index', params: { processType: basetype.value } });
};
const paging = ref();
const list = ref<any[]>([]);
const tabs = [
    {
        label: '加工',
        value: '0',
    },
    {
        label: '包装赋码',
        value: '1',
    },
];
const form = ref({
    storageType: '4',
    processType: '',
    keyword: '',
});

// 滑动操作选项
const swipeOptions = reactive([
    {
        text: '复制',
        style: {
            backgroundColor: '#37A954',
            width: '80rpx',
            fontSize: '28rpx',
        },
    },
    {
        text: '修改',
        style: {
            backgroundColor: '#18BECA',
            width: '80rpx',
            fontSize: '28rpx',
        },
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#F74C30',
            width: '80rpx',
            fontSize: '28rpx',
        },
    },
]);

// 处理滑动按钮点击
const handleSwipeClick = async (event: any) => {
    const { name, index } = event;
    const item = list.value[index];

    if (index === 0) {
        // 点击复制
        handleCopy(name, item);
    } else if (index === 1) {
        // 点击修改
        handleEdit(item);
    } else if (index === 2) {
        // 点击删除
        handleDelete(name, item);
    }
};

// 处理复制
const handleCopy = async (processId: string | number, item: any) => {
    try {
        const res = await uni.showModal({
            title: '复制提示',
            content: '确定复制该加工任务吗？',
            confirmColor: '#37A954',
        });
        if (!res.confirm) return;

        const copyRes = await useClientRequest.get(`/plt-api/app/processe/copyProcess/${processId}`);
        if (copyRes && copyRes.code === 200) {
            uni.showToast({ title: '复制成功', icon: 'success' });
            paging.value?.reload();
        }
    } catch (error) {
        console.error('复制失败:', error);
    }
};

// 处理修改
const handleEdit = (item: any) => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/processing/processing-create/index',
        params: { id: item?.id, edit: 1 },
    });
};

// 处理删除
const handleDelete = async (processId: string | number, item: any) => {
    try {
        const res = await uni.showModal({
            title: '删除提示',
            content: '删除后不可恢复，请谨慎操作！',
            confirmColor: '#F74C30',
        });
        if (!res.confirm) return;

        const delRes = await useClientRequest.get(`/plt-api/app/processe/deleteProcess/${processId}`);
        if (delRes && delRes.code === 200) {
            uni.showToast({ title: '删除成功', icon: 'none' });
            paging.value?.reload();
        }
    } catch (error) {
        console.error('删除失败:', error);
    }
};

const changeSeach = () => {
    paging.value.reload();
};

const query = async (pageNum: number, pageSize: number) => {
    const params = {
        pageNum,
        pageSize,
        ...form.value,
    };
    const res = await useClientRequest.get('/plt-api/app/processe/pageList', params);
    if (res) {
        const { rows } = res;
        paging.value.complete(rows);
    }
};
const gotodetaillist = (item: any) => {
    uni.$u.route({
        type: 'navigateTo',
        url: '/plant/processing/processing-detail-list/index',
        params: { id: item?.id },
    });
};
//获取所选类型的数量
const selectNumber = async () => {
    const res = await useClientRequest.get('/plt-api/app/processe/processCountList');
    if (res) {
        console.log(res);
        processCountList.value = res?.data;
        return res;
    }
};

const onRefresh = () => {
    paging.value?.reload();
};
onMounted(() => {
    uni.$on('updateprocesstasklist', function () {
        paging.value?.reload();
    });
});
onShow(() => {
    selectNumber();
});
</script>
<style scoped lang="scss">
.search-select-item {
    height: 86rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 12rpx;
}
</style>