269 lines
11 KiB
Vue
269 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div style="display: flex; align-items: center; margin-bottom: 12px;">
|
|||
|
|
<el-select v-model="selectedValue" placeholder="请选择合同" style="width: 100%">
|
|||
|
|
<el-option v-for="item in contractList" :key="item.orderId" :value="item.orderId"
|
|||
|
|
:label="item.contractCode" />
|
|||
|
|
</el-select>
|
|||
|
|
<!-- 编辑按钮：点击打开弹窗 -->
|
|||
|
|
<el-button v-if="mode == 'today'" @click="openSelectDialog" type="primary" size="small" style="margin-left: 8px; padding: 0 12px;">
|
|||
|
|
<i class="el-icon-setting"></i>
|
|||
|
|
</el-button>
|
|||
|
|
|
|||
|
|
<!-- 刷新时不会移除手动添加的合同 -->
|
|||
|
|
<el-button @click="handleRefresh" type="info" size="small" style="margin-left: 8px; padding: 0 12px;">
|
|||
|
|
<i class="el-icon-refresh"></i>
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 查询所有的合同和当前localstorage中的合同，可以对localstorage中的合同进行新增和删除，手动新增的合同带有手动添加的标记 -->
|
|||
|
|
<el-dialog title="可选合同配置" :visible.sync="dialogVisible" width="80%">
|
|||
|
|
<el-tabs v-model="activeTab">
|
|||
|
|
<!-- 已配置合同tab -->
|
|||
|
|
<el-tab-pane label="可选合同" name="configured">
|
|||
|
|
<div v-if="contractList.length === 0" style="text-align: center; padding: 20px;">
|
|||
|
|
暂无已配置合同
|
|||
|
|
</div>
|
|||
|
|
<el-table v-else :data="contractList" style="width: 100%" size="mini" height="600">
|
|||
|
|
<el-table-column prop="contractCode" label="合同编号" width="160" />
|
|||
|
|
<el-table-column prop="contractName" label="合同名称" width="180" />
|
|||
|
|
<el-table-column prop="customer" label="客户" width="140" />
|
|||
|
|
<el-table-column prop="salesman" label="销售人员" width="100" />
|
|||
|
|
<el-table-column prop="deliveryDate" label="交付日期" width="110">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
{{ scope.row.deliveryDate || '-' }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
|||
|
|
<el-table-column label="添加方式" width="90">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-tag v-if="scope.row.isManual" type="success" size="small">手动</el-tag>
|
|||
|
|
<el-tag v-else type="info" size="small">接口</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="70">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button type="danger" size="mini" @click="removeContract(scope.row.orderId)" plain>
|
|||
|
|
移除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<!-- 所有合同tab -->
|
|||
|
|
<el-tab-pane label="所有合同" name="all">
|
|||
|
|
<div style="margin-bottom: 16px;">
|
|||
|
|
<el-input v-model="searchKeyword" placeholder="搜索合同" @input="handleSearch" clearable size="small">
|
|||
|
|
<el-button slot="append" icon="el-icon-search" size="small"></el-button>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table :data="allContracts" style="width: 100%" size="mini" height="600">
|
|||
|
|
<el-table-column prop="contractCode" label="合同编号" width="160" />
|
|||
|
|
<el-table-column prop="contractName" label="合同名称" width="180" />
|
|||
|
|
<el-table-column prop="customer" label="客户" width="140" />
|
|||
|
|
<el-table-column prop="salesman" label="销售人员" width="100" />
|
|||
|
|
<el-table-column prop="deliveryDate" label="交付日期" width="110">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
{{ scope.row.deliveryDate || '-' }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
|||
|
|
<el-table-column label="状态" width="80">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-tag v-if="isContractInList(scope.row.orderId)" type="success" size="small">已添加</el-tag>
|
|||
|
|
<el-tag v-else type="info" size="small">未添加</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="100">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button
|
|||
|
|
v-if="!isContractInList(scope.row.orderId)"
|
|||
|
|
type="primary"
|
|||
|
|
size="mini"
|
|||
|
|
@click="addContract(scope.row)"
|
|||
|
|
plain
|
|||
|
|
>
|
|||
|
|
添加
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
v-else
|
|||
|
|
type="danger"
|
|||
|
|
size="mini"
|
|||
|
|
@click="removeContract(scope.row.orderId)"
|
|||
|
|
plain
|
|||
|
|
>
|
|||
|
|
移除
|
|||
|
|
</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<div v-if="allContracts.length === 0" style="text-align: center; padding: 20px;">
|
|||
|
|
暂无合同数据
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { listOrder, listTodayOrder } from '@/api/crm/order';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "ContractSelect",
|
|||
|
|
props: {
|
|||
|
|
value: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: "today" // today 或 all
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
contractList: [],
|
|||
|
|
dialogVisible: false,
|
|||
|
|
searchKeyword: '',
|
|||
|
|
allContracts: [],
|
|||
|
|
activeTab: 'configured', // 默认显示已配置合同tab
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
selectedValue: {
|
|||
|
|
get() {
|
|||
|
|
return this.value;
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
this.$emit('input', val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (this.mode == "today") {
|
|||
|
|
// 从localstorage中获取合同列表
|
|||
|
|
this.loadFromLocalStorage();
|
|||
|
|
} else {
|
|||
|
|
this.loadContractList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 从localStorage中加载合同列表
|
|||
|
|
loadFromLocalStorage() {
|
|||
|
|
try {
|
|||
|
|
const storedContracts = localStorage.getItem('todayContracts');
|
|||
|
|
if (storedContracts) {
|
|||
|
|
this.contractList = JSON.parse(storedContracts);
|
|||
|
|
} else {
|
|||
|
|
// 如果localStorage中没有，从接口获取
|
|||
|
|
this.loadContractList();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load contracts from localStorage:', error);
|
|||
|
|
this.loadContractList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 保存合同列表到localStorage
|
|||
|
|
saveToLocalStorage() {
|
|||
|
|
try {
|
|||
|
|
localStorage.setItem('todayContracts', JSON.stringify(this.contractList));
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to save contracts to localStorage:', error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载合同列表
|
|||
|
|
async loadContractList(keyword) {
|
|||
|
|
if (this.mode == "all") {
|
|||
|
|
const res = await listOrder({
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 1000,
|
|||
|
|
keyword: keyword || undefined,
|
|||
|
|
});
|
|||
|
|
this.contractList = res.rows || [];
|
|||
|
|
}
|
|||
|
|
else if (this.mode == "today") {
|
|||
|
|
const res = await listTodayOrder();
|
|||
|
|
// 获取现有手动添加的合同
|
|||
|
|
const existingManualContracts = this.contractList.filter(item => item.isManual);
|
|||
|
|
// 将接口返回的合同标记为非手动添加
|
|||
|
|
const apiContracts = (res.data || []).map(item => ({
|
|||
|
|
...item,
|
|||
|
|
isManual: false
|
|||
|
|
}));
|
|||
|
|
// 合并合同列表，保留手动添加的合同
|
|||
|
|
this.contractList = [...apiContracts, ...existingManualContracts];
|
|||
|
|
// 去重，避免重复合同
|
|||
|
|
this.contractList = this.contractList.filter((item, index, self) =>
|
|||
|
|
index === self.findIndex(t => t.orderId === item.orderId)
|
|||
|
|
);
|
|||
|
|
// 保存到localStorage
|
|||
|
|
this.saveToLocalStorage();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 打开选择弹窗
|
|||
|
|
async openSelectDialog() {
|
|||
|
|
this.dialogVisible = true;
|
|||
|
|
// 加载所有合同供选择
|
|||
|
|
await this.loadAllContracts();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 加载所有合同
|
|||
|
|
async loadAllContracts() {
|
|||
|
|
try {
|
|||
|
|
const res = await listOrder({
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 1000,
|
|||
|
|
keyword: this.searchKeyword || undefined,
|
|||
|
|
});
|
|||
|
|
// 合并现有合同（包括手动添加的）
|
|||
|
|
const existingContracts = this.contractList;
|
|||
|
|
this.allContracts = [...res.rows || [], ...existingContracts].filter((item, index, self) =>
|
|||
|
|
index === self.findIndex(t => t.orderId === item.orderId)
|
|||
|
|
);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Failed to load all contracts:', error);
|
|||
|
|
this.allContracts = [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 搜索合同
|
|||
|
|
handleSearch() {
|
|||
|
|
this.loadAllContracts();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 检查合同是否在列表中
|
|||
|
|
isContractInList(orderId) {
|
|||
|
|
return this.contractList.some(item => item.orderId === orderId);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加合同
|
|||
|
|
addContract(contract) {
|
|||
|
|
if (!this.isContractInList(contract.orderId)) {
|
|||
|
|
this.contractList.push({
|
|||
|
|
...contract,
|
|||
|
|
isManual: true // 标记为手动添加
|
|||
|
|
});
|
|||
|
|
this.saveToLocalStorage();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 移除合同
|
|||
|
|
removeContract(orderId) {
|
|||
|
|
this.contractList = this.contractList.filter(item => item.orderId !== orderId);
|
|||
|
|
this.saveToLocalStorage();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 刷新合同列表
|
|||
|
|
handleRefresh() {
|
|||
|
|
this.loadContractList();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|