砂糖
af002b84d3
- 添加钢卷与合同关联的API接口 - 在合卷、分条、打字等操作中增加合同选择组件 - 创建合同选择组件ContractSelect - 在合同详情页新增生产成果展示页签 - 实现合同列表的本地存储功能
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> |