merchant_feedov_web/src/views/order/BuyCard/index copy.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">
      <a-button @click="openAudit" type="text">
        <template #icon>
          <icon-plus-circle />
        </template>
        <template #default>审核</template>
      </a-button>
    </div>
    <!-- 数据表格 -->
    <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection" :columns="columns"
      :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
      <template #operate="{ record }">
        <a-button @click="openContract(record)" type="text">上传合同</a-button>
      </template>
      <template #detail="{ record }">
        <a-button @click="openDetail(record)" type="text">订单详情</a-button>
      </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="orderNumber" label="单号">
          <!-- <a-input v-model="formContract.orderNumber" disabled placeholder="请输入单号" /> -->
          <div class="audit-txt">{{ formContract.orderNumber }}</div>
        </a-form-item>
        <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="fileList" label="销售合同">
          <a-upload action="/" :default-file-list="formContract.fileList" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
      cancelText="关闭">
      <a-form :model="formAudit" auto-label-width>
        <a-form-item field="customerName" label="客户">
          <!-- <a-input v-model="formAudit.customerName" placeholder="请输入客户" /> -->
          <div class="audit-txt" style="color:#418035;">演示账号02</div>
        </a-form-item>
        <a-form-item field="cardType" label="卡类型">
          <!-- <a-input v-model="formAudit.cardType" placeholder="请输入单号" /> -->
          <div class="audit-txt">普通卡切卡普通卡MP1，1元/涨<div class="audit-tag">共1张卡</div>
          </div>
        </a-form-item>
        <a-form-item field="money" label="资费">
          <!-- <a-input v-model="formAudit.money" placeholder="请输入单号" /> -->
          <div class="audit-txt">“移动100M月包” <div class="audit-tag">订购12个月</div>
          </div>
        </a-form-item>
        <a-form-item field="orderStatus" label="订单状态">
          <!-- <a-input v-model="formAudit.orderStatus" placeholder="请输入单号" /> -->
          <a-radio-group v-model="formAudit.orderStatus" :options="options" />
        </a-form-item>
        <a-form-item field="auditOpinion" label="审核意见">
          <!-- <a-input v-model="formAudit.auditOpinion" placeholder="请输入单号" /> -->
          <a-textarea placeholder="您填写的审核意见会直接投送给用户，请认真填写！" v-model="formAudit.auditOpinion" allow-clear />
        </a-form-item>
        <a-form-item field="fileList" label="销售合同">
          <a-upload action="/" :default-file-list="formAudit.fileList" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="showDetail" width="800px" title="订单详情" :hide-cancel="true" @cancel="detailCancel">
      <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>
    </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 } from 'vue';
import { Message } from '@arco-design/web-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', render: ({ rowIndex }) => rowIndex + 1 },
  { title: '订单编号', dataIndex: 'cardNumber' },
  { title: '客户名称', dataIndex: 'customerName' },
  { title: '审核状态', dataIndex: 'auditStatus' },
  { title: '订单状态', dataIndex: 'orderStatus' },
  { title: '开卡张数', dataIndex: 'cardQuantity' },
  { title: '通道', dataIndex: 'source' },
  { title: '资费', dataIndex: 'money' },
  { title: '结算价/原价(元)', dataIndex: 'outMoney' },
  { title: '下单时间', dataIndex: 'orderTime' },
  { title: '操作', slotName: 'operate', align: 'center' },
  { title: '详情', slotName: 'detail', align: 'center' },
];
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 tableData = ref([
  {
    cardNumber: '13800138000',
    customerName: '张三',
    auditStatus: '1',
    orderStatus: '1',
    cardQuantity: 24,
    source: '联通',
    money: '100',
    outMoney: '10',
    orderTime: '2024-10-11'
    // operate:'上传合同'
  },
  {
    cardNumber: '13800138000',
    customerName: '李四',
    auditStatus: '1',
    orderStatus: '1',
    cardQuantity: 24,
    source: '联通',
    money: '100',
    outMoney: '10',
    orderTime: '2024-10-11'
    // operate:'上传合同'
  }, {
    cardNumber: '13800138000',
    customerName: '王五',
    auditStatus: '1',
    orderStatus: '1',
    cardQuantity: 24,
    source: '联通',
    money: '100',
    outMoney: '10',
    orderTime: '2024-10-11'
    // operate:'上传合同'
  },
  // 可以添加更多模拟数据...
]);
// 上传合同的弹框
const uploadContract = ref(false);
const pagination = reactive({
  total: tableData.value.length,
  current: 1,
  pageSize: 10,
});
const openContract = (item) => {
  console.log(item, '???')
  uploadContract.value = true;
  formContract.customerName = item.customerName;
  formContract.orderNumber = item.cardNumber;
};
//订单详情的弹框
const showDetail = ref(false);
// 查看订单详情
const openDetail = (item) => {
  showDetail.value = true;
}
const handleBeforeOk = (done) => {
  console.log(formContract)
  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 options = [
  { label: '发货', value: '1' },
  { label: '退回', value: '2' },
];
// 审核
const showAudit = ref(false);
const formAudit = reactive({
  customerName: '',
  cardType: '',
  money: '',
  orderStatus: '',
  auditOpinion: '',
  fileList: []
})
// 触发审核的弹框
const openAudit = () => {
  showAudit.value = true;
}
// 确认审核
const submitAudit = () => {
  console.log(formAudit, 'lll')
  window.setTimeout(() => {
    showAudit.value = false;
  }, 1000)
}
// 分配卡号的值
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;
  justify-content: center;
  align-items: center;

  .audit-tag {
    margin-left: 20px;
    background: #63c2c6;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 50px;
  }
}

.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>