merchant_feedov_web/src/views/tariffManagement/Management/meal.vue

<template>
    <a-modal width="55%" v-model:visible="modelValue" @ok="handleOk" @cancel="handleCancel" title="套餐">
        <div class="add"><a-button type="primary" @click="addMeal" v-if="role.getRole == 1">添加套餐</a-button></div>
        <div class="item_warp">
            <a-table :columns="columns" :data="wanberFloter" style="margin-top: 20px" :pagination="false"
                :scroll="{ y: 'auto' }">
                <template #period="{ record, rowIndex }">
                    <a-input v-model="record.period" :disabled="role.getRole !== 1" />
                </template>
                <template #price="{ record, rowIndex }">
                    <a-input v-model="record.price" />
                </template>
                <template #currency="{ record, rowIndex }">
                    <a-select v-model="record.currency" :style="{ width: '300px' }" placeholder="请选择币种"
                        :disabled="role.getRole !== 1">
                        <a-option v-for="res of Pricing" :value="res.value" :label="res.label" />
                    </a-select>
                </template>
                <template #label="{ record, rowIndex }">
                    <a-input v-model="record.label" v-if="role.getRole !== 1" />
                </template>
                <template #setting="{ record }">
                    <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="addUpate(record)">{{
                        record.id == '' ? '添加' : '修改' }}</a>
                    <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
                        :cancel-text="$t('form.Cancel')" @ok="deletaMeal(record.id)">
                        <a class="a-link" href="javascript:;" v-if="role.getRole == 1">{{
                            $t('form.Delete')
                        }}</a>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>
    </a-modal>
</template>

<script setup>
import { ref, onMounted, toRefs, toRef, watch } from 'vue';
import { Getdictionary } from '@/mixins/index.js'
import { useSystemStore } from '@/store/modules/systemStore'
import { Message } from '@arco-design/web-vue'
import { addTariffPackage, CheckTariffPackages, UpdateTariffTtems, DeleteTariffItems } from '@/api/path/tariffManagement.api'
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    traffIds: {
        type: [String, Number],
        default: undefined
    }
})
const role = useSystemStore()
const modelValue = toRef(props, 'modelValue')
const traffIds = toRef(props, 'traffIds')
const indexSet = ref(0)

const emit = defineEmits(['update:modelValue', 'submit'])
const columns = [{
    title: '套餐期限(月)',
    dataIndex: 'period',
    slotName: 'period',
    ellipsis: true,
    align: 'center',
}, {
    title: '套餐价格',
    dataIndex: 'price',
    slotName: 'price',
    ellipsis: true,
    align: 'center',
}, {
    title: '币种',
    dataIndex: 'currency',
    slotName: 'currency',
    ellipsis: true,
    align: 'center',
}, {
    title: '套餐名称',
    slotName: 'label',
    ellipsis: true,
    align: 'center',
}, {
    title: '操作',
    slotName: 'setting',
    ellipsis: true,
    align: 'center',
}];
const state = ref({
    wanberFloter: [
        { id: '', period: '', price: '', currency: '', label: '' }
    ],
    formRef: null,
    Pricing: []
})
const { wanberFloter, formRef, Pricing } = toRefs(state.value)
// 添加套餐
const handleOk = () => {
    emit('update:modelValue', false)
    emit('submit', true)
    handleCancel()
}
// 确定或者修改
const addUpate = async (item) => {
    item.period = Number(item.period)
    let res;
    if (item.id == '') {
        res = await addTariffPackage({ TrafficId: traffIds.value, price: item.price, currency: item.currency, period: item.period, label: item.label })
    } else {
        res = await UpdateTariffTtems(item)
    }

    if (res.code === 200) {
        Message.success(res.message)
        await getList()
    }
}
const handleCancel = () => {
    emit('update:modelValue', false)
    wanberFloter.value = [
        { id: '', period: '', price: '', currency: '', label: '' }
    ]
    traffIds.value = undefined
}
const addMeal = () => {
    wanberFloter.value.push({ id: '', period: '', price: '', currency: '', label: '' })
}
// 删除
const deletaMeal = async (ids) => {
    let res = await DeleteTariffItems({ id: ids })
    if (res.code === 200) {
        Message.success("删除成功")
        await getList()
    }
}

const handeDict = async () => {
    Pricing.value = await Getdictionary('currencyType')
}

const getList = () => {
    CheckTariffPackages({ tariffId: traffIds.value }).then(res => {
        if (res.code === 200) {
            indexSet.value = res.data.length
            wanberFloter.value = res.data
        }
    })
}

watch(() => modelValue.value, async (val, newVal) => {
    if (val) {
        await getList()
    }
}, { deep: true })

onMounted(() => {
    handeDict()
})
</script>
<style scoped lang="less">
.add {
    display: flex;
    justify-content: end;
}

.item_warp {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}
</style>