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

<!-- 购卡订单 -->
<template>
  <div class="silent-expire-alarm">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <Search/>
    </div>
    <div class="audit-btn" v-if="userType == 2">
      <a-button @click="showAudit=true" 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 #image="{ record }">
        <a-image width="60" height="60" :src="record.contractImg" :preview-props="{
          actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
        }">
        </a-image>
      </template>
      <template #id="{ record }">
        <div class="line_heis" @click="openDetail(record)">{{ record.id }}</div>
      </template>
      <template #statusType="{ record }">
        <a-tag color="orangered" v-if="record.moderationStatus == 1">待审核</a-tag>
        <a-tag color="arcoblue" v-if="record.moderationStatus == 2">审核通过</a-tag>
        <a-tag color="#f53f3f" v-if="record.moderationStatus == 3">已驳回</a-tag>
      </template>
      <template #LogisticsStatus="{ record }">
        <a-tag color="#168cff" v-if="record.tmsStatus == 1">未发货</a-tag>
        <a-tag color="#00b42a" v-if="record.tmsStatus == 2">已发货</a-tag>
      </template>
      <template #operate="{ record }">
        <div v-if="userType == 1">
          <a-button type="text" v-if="record.moderationStatus == 1" @click="statusOrder(record)">审核</a-button>
          <a-button @click="uploadModal(record)" type="text">{{ record.contractImg == '' ? '上传合同' : '查看合同' }}</a-button>
        </div>
        <div v-if="userType == 2">
          <a-popconfirm :content="`是否确认退订?`" type="warning" @ok="adminCancel(record)"
            v-if="record.moderationStatus != 3">
            <a-button type="text">退订</a-button>
          </a-popconfirm>
          <a-button @click="openDetail(record)" type="text">查看</a-button>
        </div>
      </template>
    </a-table>


    <a-modal v-model:visible="uploadContract" width="600px" title="上传合同"
      @cancel="closeModal(uploadContract, formContract)" @ok="handleBeforeOk" okText="保存" cancelText="关闭">
      <a-form :model="formContract" auto-label-width>
        <a-form-item field="customerName" label="客户名称">
          <div class="audit-txt" style="color:#418035;">{{ FormDataList.userName }}</div>
        </a-form-item>
        <a-form-item field="orderNumber" label="订单编号">
          <div class="audit-txt">{{ FormDataList.id }}</div>
        </a-form-item>
        <a-form-item field="contractImg" label="销售合同">
          <Upload v-model:model-value="formContract.contractImg" />
        </a-form-item>
      </a-form>
    </a-modal>

    <Card v-model:modelValue="showAudit" @submit="intData()"/>
    <Status v-model:modelValue="showStatus" @submit="intData()" :FormDataList="FormDataList"/>
    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList"/>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs } from 'vue';
import { Message } from '@arco-design/web-vue';
import { purchaseOrderList, platformUpdate, adminUpdate } from '@/api/path/purchase';
import {  UploadOrderCardContract } from '@/api/path/order'
import { Getdictionary } from '@/mixins/index.js'
import Upload from "@/components/upload/index.vue";
import Card from './Card.vue'
import Status from './status.vue'
import Detaile from './detaile.vue'
import Search from '@/components/Search/index.vue'
// 数据层
const state = ref({
  userName: localStorage.getItem('remember_user_name'),
  userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
  tableData: [],
  currentIndex: null,
  FormDataList: {},
  pageData: {
    total: 0,
    size: 10,
    current: 1,
  },
  showAudit: false,
  showStatus: false,
  formContract: {
    id: null,
    contractImg: []
  }, // 文件上传列表
  showDetail: false,
  uploadContract: false,
});

const {
  userType,
  tableData,
  FormDataList,
  pageData,
  showAudit,
  showStatus,
  formContract,
  showDetail,
  uploadContract,
} = toRefs(state.value);

const columns = [
  { title: '序号', dataIndex: 'index', align: 'center', ellipsis: true },
  { title: '订单编号', slotName: 'id', align: 'center', ellipsis: true },
  { title: '审核状态', slotName: 'statusType', align: 'center', ellipsis: true },
  { title: '物流状态', slotName: 'LogisticsStatus', align: 'center', ellipsis: true },
  { title: '客户名称', dataIndex: 'userName', align: 'center', ellipsis: true },
  { title: '采购数量', dataIndex: 'quantity', align: 'center', ellipsis: true },
  { title: '静默期(月)', dataIndex: 'periodOfSilence', align: 'center', ellipsis: true },
  { title: '卡类型', dataIndex: 'CardType', align: 'center', ellipsis: true },
  { title: '运营商名称', dataIndex: 'sourceName', align: 'center', ellipsis: true },
  { title: '资费', dataIndex: 'trafficName', align: 'center', ellipsis: true },
  { title: '支付金额', dataIndex: 'quantity', align: 'center', ellipsis: true },
  { title: '合同照片', slotName: 'image', align: 'center', ellipsis: true },
  { title: '下单时间', dataIndex: 'createdAt', align: 'center', ellipsis: true },
  { title: '操作', slotName: 'operate', align: 'center', ellipsis: true }
];

// 订单列表
const intData = async () => {
  const param = {
    current: pageData.value.current,
    size: pageData.value.size,
  }
  const res1 = await Getdictionary('cardType')
  let res3 = await Getdictionary('source')
  purchaseOrderList(param).then(res => {
    tableData.value = (res.data.records || []).map((item, key) => {
      const sourceName = res3.filter((item) => item.typeKey == 'source')?.find(val => item.source == val.value)?.label
      const CardType = res1.filter(val => val.typeKey == 'cardType')?.find(vals => vals.value == item.simType)?.label
      return {
        ...item,
        index: key + 1,
        sourceName,
        CardType
      }
    });
    pageData.value.total = res.data.total;
  })

}
// 用户退订
const adminCancel = (data) => {
  const param = {
    id: data.id,
    status: data.status
  }
  adminUpdate(param).then(res => {
    intData();
  })
}
// 分页
const evChangePage = (page) => {
  pageData.value.current = page
  intData()
}

// 订单审核
const statusOrder = (items) => {
  FormDataList.value = items
  showStatus.value = true
}

// 上传合同
const uploadModal = (item) => {
  uploadContract.value = true;
  FormDataList.value = item
  formContract.value = {
    id: item.id,
    contractImg: item.contractImg
  }
};
// 查看订单详情
const openDetail = async (item) => {
  FormDataList.value = item
  showDetail.value = true;
}
// 上传合同
const handleBeforeOk = () => {
  new Promise((resolve, reject) => {
    formContract.value.id = FormDataList.value.id;
    UploadOrderCardContract(formContract.value).then(res => {
      resolve(res)
      Message.success(res.message)
      intData();
    }).catch(error => {
      reject(error)
    })
  })
};
// 模态框取消
const closeModal = (items, obj) => {
  items = false
  Object.keys(obj).forEach(key => {
    if (obj.key) {
      obj[key] = '';
    }
  })
}

onMounted(() => {
  intData();
})
</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-table {
  margin-top: 20px;
}

.line_heis {
  color: #FF8839;
  cursor: pointer;
  display: inline-block;
}

.line_heis:hover {
  color: #168cff;
}
</style>