Merge remote-tracking branch 'refs/remotes/origin/dev_New' into dev_tide_mi...

zouyu

9 天以前 1c0863efe062af3ebcdecb8c10568d779f5c8295

 src/views/customerService/expiryAfterSales/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,258 @@
<template>
   <div class="app-container">
      <div class="search_form">
         <div>
            <span class="search_title">临期日期：</span>
            <el-date-picker
               v-model="searchForm.expiryDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               @change="handleQuery"
            />
            <span class="search_title ml10">处理日期：</span>
            <el-date-picker
               v-model="searchForm.handleDate"
               value-format="YYYY-MM-DD"
               format="YYYY-MM-DD"
               type="date"
               placeholder="请选择"
               clearable
               @change="handleQuery"
            />
        <span style = "margin-left: 10px;" class="search_title">处理状态：</span>
        <el-select v-model="searchForm.status" placeholder="请选择状态" @change="handleQuery" style="width: 140px" clearable>
          <el-option label="待处理" :value="1"></el-option>
          <el-option label="已处理" :value="2"></el-option>
        </el-select>
            <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
            >搜索</el-button
            >
            <el-button @click="resetQuery" style="margin-left: 10px"
            >重置</el-button
            >
         </div>
      </div>
      <div class="table_actions" style="margin-bottom: 10px;">
         <el-button type="primary" @click="openForm('add')">新增</el-button>
         <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
      <div class="table_list">
         <PIMTable
            rowKey="id"
            :column="tableColumn"
            :tableData="tableData"
            :page="page"
            :isSelection="true"
            @selection-change="handleSelectionChange"
            :tableLoading="tableLoading"
            @pagination="pagination"
         >
            <!-- è¡¨æ ¼æ’槽 -->
            <template #status="{ row }">
               <el-tag :type="row.status === 1 ? 'warning' : 'success'">
                  {{ row.status === 1 ? '待处理' : '已处理' }}
               </el-tag>
            </template>

            <template #operation="{ row }">
               <el-button type="primary" link @click="openForm('view', row)">查看</el-button>
               <el-button type="primary" link @click="openForm('edit', row)" v-if="row.status === 1">编辑</el-button>
            </template>
         </PIMTable>
      </div>
      <form-dia ref="formDia" @close="handleQuery"></form-dia>
   </div>
</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import FormDia from "@/views/customerService/expiryAfterSales/components/formDia.vue";
import {ElMessageBox} from "element-plus";
// import {expiryAfterSalesDelete, expiryAfterSalesListPage} from "@/api/customerService/index.js"; // æš‚时注释掉，使用假数据
import useUserStore from "@/store/modules/user.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore()

const data = reactive({
   searchForm: {
      expiryDate: "",
      handleDate: "",
      status: ""
   },
   tableData: [],
   page: {
      current: 1,
      size: 10,
      total: 0,
   },
   selectedRows: [],
   tableLoading: false,
   formDia: null,
   tableColumn: [
      {
         label: "临期产品名称",
         prop: "productName",
         width: "",
      },
      {
         label: "产品批号",
         prop: "batchNumber",
         width: "",
      },
      {
         label: "临期日期",
         prop: "expiryDate",
         width: "",
      },
      {
         label: "库存数量",
         prop: "stockQuantity",
         width: "",
      },
      {
         label: "客户名称",
         prop: "customerName",
         width: "",
      },
      {
         label: "问题描述",
         prop: "problemDesc",
         width: "",
      },
      {
         label: "处理状态",
         prop: "status",
         width: "",
         slot: true,
      },
      {
         label: "处理人",
         prop: "handlerName",
         width: "",
      },
      {
         label: "处理日期",
         prop: "handleDate",
         width: "",
      },
      {
         label: "操作",
         prop: "operation",
         slot: true,
         width: "200",
      },
   ],
});

const {
   searchForm,
   tableData,
   page,
   selectedRows,
   tableLoading,
   formDia,
   tableColumn,
} = toRefs(data);

// æŸ¥è¯¢
const handleQuery = () => {
   page.value.current = 1;
   getList();
};

// é€‰æ‹©
const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
};

// é‡ç½®
const resetQuery = () => {
   proxy.resetForm("queryRef");
   searchForm.value = {
      expiryDate: "",
      handleDate: "",
      status: ""
   };
   handleQuery();
};

// åˆ†é¡µ
const pagination = (obj) => {
   page.value.current = obj.page;
   page.value.size = obj.limit;
   getList();
};

// èŽ·å–列表数据
const getList = () => {
   tableLoading.value = true;
   // å–消注释并使用真实API
   // expiryAfterSalesListPage({
   //    ...searchForm.value,
   //    current: page.value.current,
   //    size: page.value.size
   // }).then(res => {
   //    tableData.value = res.data.records;
   //    page.value.total = res.data.total;
   //    tableLoading.value = false;
   // });
	
   // æš‚时返回空数据
   tableData.value = [];
   page.value.total = 0;
   tableLoading.value = false;
};

// æ‰“开弹框
const openForm = (type, row) => {
   nextTick(() => {
      formDia.value?.openDialog(type, row)
   })
};

// åˆ é™¤
const handleDelete = () => {
   let ids = [];
   if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map((item) => item.id);
   } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
   }
   ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
   })
      .then(() => {
         tableLoading.value = true;
         // å–消注释并使用真实API
         // expiryAfterSalesDelete(ids).then(() => {
         //    proxy.$modal.msgSuccess("删除成功");
         //    getList();
         // }).finally(() => {
         //    tableLoading.value = false;
         // });
			
         // æš‚时模拟删除成功
         tableLoading.value = false;
         proxy.$modal.msgSuccess("删除成功");
         getList();
      })
      .catch(() => {
         proxy.$modal.msg("已取消");
      });
};

onMounted(() => {
   getList();
});
</script>

<style scoped>

</style>