BMS/bms-front/src/views/price/label/components/LabelChannelTable.vue

<template>
  <set-section-card
    :title="title"
    tone="blue"
    :count="rows.length"
    :sub="sub"
  >
    <template #action>
      <el-button
        type="primary"
        size="small"
        icon="Plus"
        :disabled="!priceSetId"
        @click="openBind"
        v-hasPermi="['price:label:edit']"
      >添加渠道</el-button>
    </template>

    <el-table v-loading="loading" :data="rows" border empty-text="暂未绑定渠道">
      <el-table-column label="渠道编码" prop="channelCode" min-width="140" show-overflow-tooltip />
      <el-table-column label="渠道名称" prop="channelName" min-width="180" show-overflow-tooltip />
      <el-table-column label="应收产品" prop="productName" min-width="160" show-overflow-tooltip />
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="danger" @click="unbind(row)" v-hasPermi="['price:label:edit']">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="bindOpen" title="绑定渠道" width="560px" append-to-body @closed="onClosed">
      <el-form label-width="110px">
        <el-form-item label="套餐产品" required>
          <el-select v-model="form.productId" filterable clearable placeholder="选择本套餐内应收产品" style="width: 100%">
            <el-option
              v-for="item in productOptions"
              :key="item.productId"
              :label="item.productName"
              :value="item.productId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道" required>
          <el-select
            v-model="form.channelIds"
            multiple
            filterable
            clearable
            collapse-tags
            collapse-tags-tooltip
            placeholder="可多选渠道"
            style="width: 100%"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.id"
              :label="channelLabel(item)"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <div class="hint">绑定后会写入渠道应收产品，并关联本打单套餐。</div>
      </el-form>
      <template #footer>
        <el-button @click="bindOpen = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="submit">确定</el-button>
      </template>
    </el-dialog>
  </set-section-card>
</template>

<script setup>
import SetSectionCard from '../../set/components/detail/SetSectionCard.vue'
import { listLabelChannels, bindLabelChannels, unbindLabelChannel, listLabelProducts } from '@/api/price/label'
import { listChannelOptions } from '@/api/masterdata/serviceChannel'

const props = defineProps({
  priceSetId: { type: [Number, String], default: null }
})

const { proxy } = getCurrentInstance()
const title = '绑定渠道'
const sub = '渠道计费时按应收产品 + 本套餐取价'
const loading = ref(false)
const rows = ref([])
const bindOpen = ref(false)
const saving = ref(false)
const productOptions = ref([])
const channelOptions = ref([])
const form = reactive({
  productId: undefined,
  channelIds: []
})

function channelLabel(item) {
  const code = item.channelCode || item.id || ''
  const name = item.channelName || ''
  return name ? (code + ' / ' + name) : String(code)
}

async function loadRows() {
  if (!props.priceSetId) {
    rows.value = []
    return
  }
  loading.value = true
  try {
    const res = await listLabelChannels(props.priceSetId)
    rows.value = res.data || []
  } finally {
    loading.value = false
  }
}

async function openBind() {
  if (!props.priceSetId) return
  form.productId = undefined
  form.channelIds = []
  const [prodRes, chRes] = await Promise.all([
    listLabelProducts(props.priceSetId),
    listChannelOptions({ blOpen: '1' })
  ])
  productOptions.value = prodRes.data || []
  channelOptions.value = chRes.data || []
  if (!productOptions.value.length) {
    proxy.$modal.msgWarning('请先导入套餐产品价卡')
    return
  }
  bindOpen.value = true
}

function onClosed() {
  form.productId = undefined
  form.channelIds = []
  saving.value = false
}

function submit() {
  if (!form.productId) {
    proxy.$modal.msgWarning('请选择套餐内应收产品')
    return
  }
  if (!form.channelIds.length) {
    proxy.$modal.msgWarning('请选择渠道')
    return
  }
  saving.value = true
  bindLabelChannels(props.priceSetId, {
    productId: form.productId,
    channelIds: form.channelIds
  }).then(res => {
    proxy.$modal.msgSuccess(res.msg || res.data || '绑定成功')
    bindOpen.value = false
    loadRows()
  }).finally(() => {
    saving.value = false
  })
}

function unbind(row) {
  if (!row?.channelId) return
  const name = row.channelName || row.channelCode || row.channelId
  proxy.$modal.confirm('确认解绑渠道「' + name + '」？').then(() => {
    return unbindLabelChannel(props.priceSetId, row.channelId)
  }).then(() => {
    proxy.$modal.msgSuccess('已解绑')
    loadRows()
  }).catch(() => {})
}

watch(() => props.priceSetId, () => loadRows(), { immediate: true })

defineExpose({ reload: loadRows })
</script>

<style scoped>
.hint {
  margin: -4px 0 0 110px;
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}
</style>