merchant_feedov_web/src/views/order/BuyCard/index.vue

<!-- 购卡订单 -->
<template>
  <div class="silent-expire-alarm">
    <!-- 搜索条件区 -->
    <!-- <div class="search-section">
      <a-form :model="searchForm" layout="inline">
        <a-form-item field="cardNumber" label="订单编号">
          <a-input v-model="searchForm.orderNumber" placeholder="请输入订单编号" allow-clear />
        </a-form-item>
        <a-form-item field="customerName" label="客户">
          <a-input v-model="searchForm.customerName" placeholder="请输入客户名称" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div> -->
    <div class="audit-btn" v-if="userType == 2">
      <a-button @click="openAudit" type="text">
        <template #icon>
          <icon-plus-circle />
        </template>
        <template #default>购卡</template>
      </a-button>
    </div>
    <!-- 数据表格 -->
    <a-table :data="tableData" :pagination="pageData" :columns="columns" @page-change="evChangePage"
             :scroll="{ x: 'auto' }">
      <!-- <template #status="{ record }">
        {{ record.status }}
      </template>
      <template #moderation_status="{ record }">
        {{ record.moderation_status }}
      </template> -->
      <template #operate="{ record }">
        <div v-if="userType == 1">
          <a-popconfirm content="审核" ok-text="通过" cancel-text="驳回" type="warning" @ok="platformCancel(record, 2)" @cancel="platformCancel(record, 3)">
            <a-button type="text">审核</a-button>
          </a-popconfirm>
          <a-button @click="uploadModal(record)" type="text">上传合同</a-button>
        </div>
        <div v-if="userType == 2">
          <a-popconfirm :content="`是否确认退订?`" type="warning" @ok="adminCancel(record)">
            <a-button type="text">退订</a-button>
          </a-popconfirm>
          <a-button @click="openDetail(record, 2)" type="text">查看</a-button>
        </div>

      </template>
    </a-table>
    <a-modal v-model:visible="uploadContract" title="上传合同" @cancel="handleCancel" @before-ok="handleBeforeOk"
      okText="保存" cancelText="关闭">
      <a-form :model="formContract" auto-label-width>
        <a-form-item field="customerName" label="客户名称">
          <!-- <a-input v-model="formContract.customerName" disabled placeholder="请输入客户" /> -->
          <div class="audit-txt" style="color:#418035;">{{ formContract.customerName }}</div>
        </a-form-item>
        <a-form-item field="orderNumber" label="订单编号">
          <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
          <div class="audit-txt">{{ formContract.orderNumber }}</div>
        </a-form-item>
        <a-form-item field="fileList" label="销售合同">
          <Upload v-model:modelValue="formContract.fileList"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 创建 -->
    <a-modal v-model:visible="showAudit" title="购卡" width="600px" @cancel="cancelPurchase" centered
      :maskClosable="false" okText="确定" cancelText="关闭" :footer="null">
      <a-form ref="formRef" :rules="rules" :model="formState" @submit="submitPurchase">
        <a-form-item field="customerName" label="客户名称">
          <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
          <div class="audit-txt">{{ userName }}</div>
        </a-form-item>
        <a-form-item label="运营商" field="source">
          <a-select v-model="formState.source" :style="{ width: '380px' }" placeholder="请选择运营商">
            <a-option v-for="item of sourceList" :value="item.id" :label="item.label" />
          </a-select>
        </a-form-item>
        <a-form-item label="资费名称" field="tariffId">
          <a-select v-model="formState.tariffId" :style="{ width: '380px' }" @change="tariffChange"
            placeholder="请选择资费ID">
            <a-option v-for="item of tariffData" :value="item.value" :label="item.label" />
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="资费详情" v-if="formState.tariffId">
          <div class="audit-txt">
            <div class="audit-tag">套餐类型<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
          </div>
        </a-form-item>
        <a-form-item label="资费计费详情" v-if="formState.tariffId">
          <div class="audit-txt">
            <div class="audit-tag">套餐类型<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
            <div class="audit-tag">资费编码<span>流量</span></div>
          </div>
        </a-form-item> -->
        <a-form-item label="卡类型" field="cardType">
          <a-select v-model="formState.cardType" :style="{ width: '380px' }" placeholder="请选择卡类型">
            <a-option v-for="item of orderType" :value="item.value" :label="item.label" />
          </a-select>
        </a-form-item>


        <a-form-item label="沉默期">
          <a-select v-model="formState.silencePeriod" :style="{ width: '380px' }" placeholder="请选择沉默期">
            <a-option v-for="item of silenceOptions" :value="item.value" :label="item.label" />
          </a-select>
        </a-form-item>
        <a-form-item label="流量池" field="flowPool">
          <a-radio-group v-model="formState.flowPool" :options="flowPoolData">
            <template #label="{ data }">
              <a-tag>{{ data.label }}</a-tag>
            </template>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="购卡数量" field="num">
          <a-input v-model="formState.num" placeholder="请输入购卡数量" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" style="margin-right: 10px;">确定</a-button>
          <a-button @click="cancelPurchase">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 详情 -->
    <a-modal v-model:visible="showDetail" width="800px" :title="currentIndex == 1 ? '退卡详情' : '查看'"
      @cancel="showDetail = false" :footer="null">
      <div class="detail-box">
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">订单编号</div>
            <div class="item-content">53357981207</div>
          </div>
          <div class="detail-item">
            <div class="item-label">订单状态</div>
            <div class="item-content">已发货</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">发货日期</div>
            <div class="item-content">2024-10-24 17:46:33</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">运营商</div>
            <div class="item-content">泰国AIS</div>
          </div>
          <div class="detail-item">
            <div class="item-label">资费信息</div>
            <div class="item-content">1.0G/月</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">最短订阅周期</div>
            <div class="item-content">3个月</div>
          </div>
          <div class="detail-item">
            <div class="item-label">最长订阅周期</div>
            <div class="item-content">--</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">计费方式</div>
            <div class="item-content">按单流量消耗计费</div>
          </div>
          <div class="detail-item">
            <div class="item-label">结算周期</div>
            <div class="item-content">月</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">流量资费计费</div>
            <div class="item-content">0.8美金/G;MRC:0元;网络接入0元</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">卡类型</div>
            <div class="item-content">工业级PlugIn</div>
          </div>
          <div class="detail-item">
            <div class="item-label">卡板费</div>
            <div class="item-content">1美金</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">流量池</div>
            <div class="item-content">组池</div>
          </div>
          <div class="detail-item">
            <div class="item-label">沉默期</div>
            <div class="item-content">6个月</div>
          </div>
        </div>
        <div class="detail-item-box">
          <div class="detail-item">
            <div class="item-label">卡数量</div>
            <div class="item-content">10000;已分配0，已退回0，已转移0
              <!-- <a-button type="primary" @click="showCard = true" style="margin-left:10px;">分配卡号</a-button> -->
            </div>
          </div>
        </div>
      </div>
      <div class="detail-table">
        <a-table :columns="columnsDetail" :data="dataDetail" />
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <a-button type="primary" html-type="submit" style="margin-right: 10px;" @click="operateHandle">确定</a-button>
      </div>
    </a-modal>
    <!-- <a-modal v-model:visible="showCard" width="800px" title="分配卡号" @cancel="showCard = false" @before-ok="submitCard"
      okText="确认" cancelText="取消">
      <a-textarea :auto-size="{
        minRows: 15,
        maxRows: 15
      }" v-model="cardNumber" max-length="1000" :show-word-limit="true" placeholder="请输入iccid,一行一个或者逗号分隔；不支持两种混合号码。"
        allow-clear />
    </a-modal> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { tariffList } from "@/api/path/tariffManagement.api";
import { purchaseOrderList, addPurchaseOrder, platformUpdate, adminUpdate } from '@/api/path/purchase';
import { Getdictionary } from '@/mixins/index.js'
import Upload from "@/components/upload/index.vue";
const selectedKeys = ref([]);
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false,
});
const searchForm = reactive({
  cardNumber: '',
  customerName: '',
});

const columns = [
  { title: '序号', dataIndex: 'index', align: 'center',ellipsis:true },
  { title: '订单编号', dataIndex: 'id', align: 'center', ellipsis:true },
  { title: '审核状态', dataIndex: 'orderTypeName', align: 'center' ,ellipsis:true},
  { title: '订单状态', dataIndex: 'statusName', align: 'center' ,ellipsis:true},
  { title: '客户名称', dataIndex: 'userName', align: 'center',ellipsis:true },
  { title: '采购数量', dataIndex: 'quantity', align: 'center' ,ellipsis:true},
  { title: '运营商名称', dataIndex: 'quantity', align: 'center',ellipsis:true },
  { title: '资费', dataIndex: 'quantity', align: 'center',ellipsis:true },
  { title: '支付金额', dataIndex: 'paymentAmount', align: 'center',ellipsis:true },
  { title: '下单时间', dataIndex: 'createdAt', align: 'center',ellipsis:true },
  { title: '操作', slotName: 'operate', align: 'center',ellipsis:true}
];
const columnsDetail = [{ title: 'ICCID', dataIndex: 'iccid' },
{ title: '池名称及编号', dataIndex: 'nameAndId' },
{ title: '卡状态', dataIndex: 'status' },
]
const dataDetail = ref([{
  iccid: '8986061800002054589N',
  nameAndId: '泰国监控40G共享/53357981207',
  status: '沉默期'
},
{
  iccid: '8986061800002054588N',
  nameAndId: '泰国监控40G共享/53357981207',
  status: '沉默期'
}, {
  iccid: '8986061800002054587N',
  nameAndId: '泰国监控40G共享/53357981207',
  status: '沉默期'
}, {
  iccid: '8986061800002054586N',
  nameAndId: '泰国监控40G共享/53357981207',
  status: '沉默期'
},])
const userName = ref(localStorage.getItem('remember_user_name'))
const userType = ref(JSON.parse(localStorage.getItem('user_login_information'))?.userType);// 1平台 2用户
const tableData = ref([]);
const formRef = ref(null);
const currentIndex = ref(null);
const rules = {
  source: [{ required: true, trigger: 'change', }],
  tariffId: [
    {
      required: true,
      trigger: 'change',
    },
  ],
  cardType: [
    {
      required: true,
      trigger: 'change',
    },
  ],
  flowPool: [
    {
      required: true,
      trigger: 'change',
    },
  ],
  num: [
    {
      required: true,
      trigger: 'change',
    },
  ],
};
const pageData = ref({
  total: 0,
  size: 10,
  current: 1,
})
const formState = ref({
  source: null,
  tariffId: null,
  cardType: null,
  silencePeriod: null,
  flowPool: null,
  num: null
})
const sourceList = ref([]) // 来源
const tariffData = ref([]) // 自费
const silenceOptions = ref([]); // 沉默期
const orderType = ref([]); // 卡类型
const flowPoolData = ref([]); // 组池
const showAudit = ref(false);

const handleDictValue = async () => {
  sourceList.value = await Getdictionary('source')
  orderType.value = await Getdictionary('cardType')
  silenceOptions.value  = await Getdictionary('silenceOf')
  flowPoolData.value = await Getdictionary('groupPool')
  const param = {
    current: 1,
    size: 999,
  }
  tariffList(param).then(res => {
    tariffData.value = res.data.records.map(item => ({
      label: item.label,
      value: item.id,
      ...item
    }));
  })
}
// 订单列表
const intData = async () => {
  const param = {
    current: pageData.value.current,
    size: pageData.value.size,
  }
  let res1 = await Getdictionary('subscriptionRelationshipStatus')
  let res2 = await Getdictionary('orderAuditStatus')
  purchaseOrderList(param).then(res => {
    tableData.value = (res.data.records || []).map((item,key) => {
      const statusName = res1.filter((item) => item.typeKey == 'subscriptionRelationshipStatus')?.find(val => item.status == val.value)?.label
      const orderTypeName = res2.filter((item) => item.typeKey == 'orderAuditStatus')?.find(val => item.status == val.value)?.label

      return {
        ...item,
        index: key + 1,
        orderTypeName,
        statusName,
      }
    });
    pageData.value.total = res.data.total;
  })

}
// 确认购卡
const submitPurchase = ({ values, errors }) => {
  formRef.value.validate(async (errors) => {
    if (!errors) {
      const data = {
        source: String(formState.value.source),
        tariffId: formState.value.tariffId,
        quantity: Number(formState.value.num),
        cardType: formState.value.cardType,
        periodOfSilence: String(formState.value.silencePeriod),
        isTrafficPool: formState.value.flowPool
      }
      addPurchaseOrder(data).then(res => {
        intData();
        showAudit.value = false;
      })
    }
  })

}
// 取消
const cancelPurchase = () => {
  showAudit.value = false;
  formRef.value.resetFields();
  Object.assign(formState, {
    source: null,
    tariffId: null,
    cardType: null,
    silencePeriod: null,
    flowPool: 0,
    num: null
  });
}
// 平台退订
const platformCancel = (data, type) => {
  const param = {
    id: data.id,
    status: type
  }
  platformUpdate(param).then(res => {
    intData();
  })
}
// 用户退订
const adminCancel = (data) => {
  const param = {
    id: data.id,
    status: data.status
  }
  adminUpdate(param).then(res => {
    intData();
  })
}

//
const tariffChange = (e) => {
  formState.value.tariffId = e;
  // tariffObj.value = res.data.records.map(item=>{

  // })
}

//
const operateHandle = () => {
  if (currentIndex.value == 1) {

  } else {
    showDetail.value = false;
  }
}

// 分页
const evChangePage = (page) => {
  pageData.value.current = page
  intData()
}

onMounted(() => {
  intData();
})

// 上传合同的弹框
const uploadContract = ref(false);
const uploadModal = (item) => {
  uploadContract.value = true;
  formContract.customerName = item.customerName;
  formContract.orderNumber = item.sourceOrderId;
};
//订单详情的弹框
const showDetail = ref(false);
// 查看订单详情
const openDetail = (item, current) => {
  currentIndex.value = current;
  uploadContract.value = true;
}
const handleBeforeOk = (done) => {
  window.setTimeout(() => {
    done()
    // prevent close
    // done(false)
  }, 3000)
};
const handleCancel = () => {
  uploadContract.value = false;
}
const handleSearch = () => {
  console.log('Search form data:', searchForm);
  Message.success('执行搜索操作');
};

const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    if (Array.isArray(searchForm[key])) {
      searchForm[key] = [];
    } else {
      searchForm[key] = null;
    }
  });
  Message.success('搜索条件已重置');
};
// 文件上传的列表
const formContract = reactive({
  orderNumber: '',
  customerName: '',
  fileList: []
})

// 触发购卡弹框
const openAudit = () => {
  showAudit.value = true;
  handleDictValue();
}

// 分配卡号的值
const cardNumber = ref('');
const showCard = ref(false);

const submitCard = () => {
}
</script>

<style scoped lang="less">
.silent-expire-alarm {
  padding: 20px !important;
  // background: #fcf;
}

.search-section {
  margin-bottom: 20px;
}

.arco-table-th {
  white-space: nowrap;
}

.audit-txt {
  display: flex;
  flex-wrap: wrap;

  .audit-tag {
    width: 180px;
    color: #b2b2b2;
    margin-right: 20px;

    span {
      color: #000;
      margin-left: 20px;
    }
  }
}

.audit-btn {
  margin-bottom: 10px;
}

.detail-box {
  .detail-item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .detail-item {
      //styleName: Body/Medium;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      display: flex;
      align-items: center;
      min-width: 350px;

      .item-label {
        color: rgba(0, 0, 0, 0.4);
        width: 120px;
        text-align: right;
        margin-right: 10px;
      }

      .item-content {
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}

.detail-table {
  margin-top: 20px;
}
</style>