merchant_feedov_web/src/views/tariffManagement/SetMeal/addSetMeal.vue

<template>
    <div>
        <div class="search">
            <Search :SearchForm="SetMealSearchForm" @query="initData" @reset="reset"></Search>
        </div>

        <div class="addSetMeal">
            <a-button type="primary" @click="visible = true">新增套餐</a-button>
        </div>

        <div class="table">
            <a-table row-key="id" :data="tableData" :columns="columnsTarrit" :pagination="pagination"
                :scroll="{ x: 'auto' }" @page-change="evChangePage">
                <template #status="{ record }">
                    <a-tag :color="record.status == 1 ? '#7bc616' : '#86909c'">{{ record.status == 1 ? '上架' : '下架'
                        }}</a-tag>
                </template>
                <template #options="{ record }">
                    <a-space>
                        <a-button type="text" @click="SetUpPackage(record)">修改</a-button>
                        <a-button type="text" @click="unmount(record)">{{ record.status == 1 ? '下架' : '上架' }}</a-button>
                        <a-popconfirm content="是否要删除该资费商品?" @ok="handelDeleteTariff(record)">
                            <a-button type="text">删除</a-button>
                        </a-popconfirm>
                    </a-space>
                </template>
            </a-table>
        </div>


        <a-modal v-model:visible="visible" width="600px" @cancel="handelCancel" title="新增套餐计划">
            <div class="Form">
                <a-form ref="formRef" :rules="rules" :model="Form">
                    <a-form-item label="套餐名称" field="label" validate-trigger="input">
                        <a-input placeholder="请输入套餐名称" v-model="Form.label"></a-input>
                    </a-form-item>
                    <a-form-item label="充值类型" field="type" validate-trigger="input">
                        <a-select v-model="Form.type" placeholder="请选择充值类型">
                            <a-option v-for="item in puyType" :value="item.value" :key="item.value">{{ item.label
                                }}</a-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="充值周期" field="period" validate-trigger="input">
                        <a-input v-model="Form.period"></a-input>
                        <a-select v-model="Form.timeUnit" style="width: 140px; margin:0 8px;">
                            <a-option v-for="item in cyciy" :value="item.value" :key="item.value">{{ item.label
                                }}</a-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="充值售价" field="price" validate-trigger="input">
                        <a-input v-model="Form.price"></a-input>
                        <a-select v-model="Form.currency" style="width: 140px; margin:0 8px;">
                            <a-option v-for="item in Currency" :value="item.value" :key="item.value">{{ item.label
                                }}</a-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="充值绑定资费" field="trafficId" validate-trigger="blur">
                        <a-select v-model="Form.trafficId">
                            <a-option v-for="item in tariffListData" :value="item.id" :key="item.id">{{ item.label
                                }}</a-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="流量大小" field="Flow" validate-trigger="change" v-if="Form.type == 2">
                        <a-input v-model="Form.flow"></a-input>
                        <a-select v-model="Form.flowUnit" style="width: 140px; margin:0 8px;">
                            <a-option value="KB">KB</a-option>
                            <a-option value="MB">MB</a-option>
                            <a-option value="GB">GB</a-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
            <template #footer>
                <a-button @click="visible = false">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script setup>
import { watch, defineProps, toRefs, ref, onMounted } from 'vue';
import { CheckTariffPackages } from '@/api/path/tariffManagement.api'
import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
import Search from '@/components/Search/index.vue'
import { columnsTarrit } from '../config'
import { tariffList, addTariffPackage, UpdateTariffTtems, DeleteTariffItems } from "@/api/path/tariffManagement.api"
import { Message, Modal } from '@arco-design/web-vue';
const props = defineProps({
    id: [Array, String]
})

const state = ref({
    pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        simTerminalId: null
    },
    visible: false,
    puyType: [],
    cyciy: [],
    Currency: [],
    tariffListData: [],
    billingMethodList: [],
    Form: {
        label: '',
        type: "",
        period: "",
        timeUnit: "",
        price: "",
        currency: "",
        trafficId: "",
        flow: "1",
        flowUnit: "",
        id:"",
    },
    formRef: null,
    Type: true,
})
const { pagination, visible, puyType, Currency, cyciy, tariffListData, Form, formRef, billingMethodList, Type } = toRefs(state.value)

const rules = {
    label: [{ required: true, message: '套餐名称不能为空' }],
    type: [{ required: true, message: '请选择充值类型' }],
    period: [{ required: true, message: '请填写充值周期' }, {
        validator: (value, cb) => {
            const pattern = /^[1-9]\d*$/
            if (!pattern.test(value)) {
                cb('请输入整数')
            } else {
                cb()
            }
        }
    }],
    price: [{ required: true, message: '请填写充值售价' }, {
        validator: (value, cb) => {
            const pattern = /^[1-9]\d*$/
            if (!pattern.test(value)) {
                cb('请输入合法的数字')
            } else {
                cb()
            }
        }
    }],
    trafficId: [{ required: true, message: '请选择充值绑定资费' }]
}

const processData = (data) => {
    return (data.records || []).map((item, index) => {
        return {
            ...item,
            price: item.price + '/' + item.currency,
            typeName: item.type == 1 ? '服务时长' : "购买流量",
            profitPrice: item.profitPrice + '/' + item.currency,
            billingMethod: filterDict(billingMethodList.value, item.billingMethod),
            costPrice:item.costPrice + '/' + item.trafficCurrency,
            oldPrice:item.oldPrice + '/' + item.trafficCurrency
        }
    })
}

const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, CheckTariffPackages, processData)


const handleSubmit = () => {
    formRef.value.validate(async (errors) => {
        if (!errors) {
            const FormList = {
                ...Form.value,
                type: Number(Form.value.type),
                period: Number(Form.value.period),
                simTerminalId: props.id
            }
            if(Type.value){
                delete FormList.id
            }
            let res = Type.value ? await addTariffPackage(FormList) : await UpdateTariffTtems(FormList)
            if (res.code === 200) {
                initData()
                Message.success(Type.value ? '添加成功' : '修改成功')
                visible.value = false
                handelCancel()
            }
        }
    })
}

const handelCancel = () => {
    Form.value.label = ""
    Form.value.type = puyType.value[0]?.value
    Form.value.period = ""
    Form.value.timeUnit = cyciy.value[0]?.value
    Form.value.price = ""
    Form.value.currency = Currency.value[0]?.value
    Form.value.trafficId = null
    Type.value = true
}


const unmount = async (record) => {
    Modal.info({
        title: `确定要${record.status == 1 ? '下架' : '上架'}吗?`,
        content: '',
        onOk: async () => {
            const FormList = {
                ...record,
                type: Number(Form.value.type),
                period: Number(Form.value.period),
                simTerminalId: props.id
            }
            let res = await UpdateTariffTtems(FormList)
            if (res.code === 200) {
                Message.success(`${record.status == 1 ? '下架' : '上架'}成功`)
                initData()
            }
        }
    });
}

const handelDeleteTariff = async (record) => {
    let res = await DeleteTariffItems({ id: record.id })
    if (res.code === 200) {
        Message.success('删除成功')
        initData()
    }
}

const SetUpPackage = async (record) => {
    Object.keys(Form.value).forEach(key => {
        Form.value[key] = record[key]
    })
    Form.value.price = record.price.split('/')[0];
    Form.value.type = String(Form.value.type)
    visible.value = true
    Type.value = false
}

onMounted(async () => {
    let dict = await Getdictionary(['RechargeType', 'PuyCycle', 'currencyType', 'billingMethod'])
    puyType.value = dict[0]
    Form.value.type = puyType.value[0]?.value
    cyciy.value = dict[1]
    Form.value.timeUnit = cyciy.value[0]?.value
    Currency.value = dict[2]
    Form.value.currency = Currency.value[0]?.value
    billingMethodList.value = dict[3]
    let res = await tariffList({ current: 1, size: 99999 })
    if (res.code === 200) {
        tariffListData.value = res.data.records || res.data
    }
    pagination.value.simTerminalId = props.id
    initData()
})
</script>

<style scoped lang='less'>
.search,
.table {
    margin-top: 20px;
}
</style>