朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 5dccd5e2e10f192a1134da4cb3d2a0781c7d766d 1 个父辈 2674802a

1. C6的AI批量处理.

内嵌 并排对比
正在显示 5 个修改的文件 包含 572 行增加 和 42 行删除
... ... @@ -36,6 +36,15 @@ module.exports = {
'^/api/static': '/static', //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
}
},
'/api/ai-agent':{
target: 'http://192.168.1.78',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://localhost:12343',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api/ai-agent': '/', //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
}
},
'/api':{
target: 'http://192.168.1.63:12343',//设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.1.189:12343',//设置你调用的接口域名和端口号 别忘了加http
... ...
import http from "../http";
let base = 'ai-agent';
export const getInfo = (data,token) => {return http.postToDify(`${base}/v1/workflows/run`, data,token);};
... ...
... ... @@ -14,6 +14,18 @@ export default {
}
})
},
postToDify(url, data, token) {
return axios({
method: 'POST', // 请求协议
url: url, // 请求的地址
data: data, // post 请求的实体类数据
timeout: 30000, // 超时时间, 单位毫秒
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Authorization':'Bearer '+token
}
})
},
postWithFrom(url, data) {
return axios({
method: 'POST', // 请求协议
... ...
... ... @@ -35,6 +35,10 @@
<el-button slot="trigger" type="primary">Excel文件</el-button>
</el-upload>
</el-col>
<el-col style="margin-left: 30px" :span="2">
<el-button type="success" icon="el-icon-s-opportunity" @click="batchFile">AI批量</el-button>
</el-col>
</el-row>
<!-- 发货人信息-->
<el-row>
... ... @@ -2089,6 +2093,47 @@ Handling Information
v-on:consigerrow="consigerSelect"
></Consigner>
</el-dialog>
<el-drawer
title="批量处理"
:visible.sync="drawer"
direction="rtl">
<!-- 进度提示 -->
<div v-if="uploadProgress.total > 0">
<el-progress
:percentage="uploadProgress.percent"
:status="uploadProgress.percent === 100 ? 'success' : 'exception'"
striped
/>
<div class="progress-text">
{{ uploadProgress.currentFile }}
({{ uploadProgress.processed }}/{{ uploadProgress.total }})
</div>
</div>
<div style="height: 100%; padding: 20px;">
<!-- 通过 text-align 实现水平居中 -->
<el-row :gutter="10" style="text-align: center;">
<el-col :span="24">
<el-upload
action=""
multiple
drag
style="display: inline-block;"
:file-list="uploadFileList"
:on-change="batchFileUpload"
:auto-upload="false"
:show-file-list="false">
<el-button slot="trigger" type="primary">Excel文件</el-button>
</el-upload>
</el-col>
</el-row>
<!-- 下方其他内容保持原布局 -->
<el-row style="margin-top: 20px;">
<el-col :span="24">
<todo-list :uploadFileList="batchFileListResult" />
</el-col>
</el-row>
</div>
</el-drawer>
<!-- 列表区域 获取收货人-->
<el-dialog :visible.sync="dialogVisible1" width="70%">
<Consignee
... ... @@ -2112,8 +2157,10 @@ Handling Information
import Consignee from "../consigner/consignee"
import {loginedUserInfo} from "../../api/user";
import {getList} from "../../api/consigner/consigner";
import {getInfo} from "@/api/dify/SHP_CNE_info_API";
import jsutil from "@/common/js/util";
import XLSX from 'xlsx';
import TodoList from "@/views/nav3/components/TodoList.vue";
function cleanString(str, maxLength = 20) {
return str.replace(/[^a-zA-Z0-9\s]/g, '').slice(0, maxLength);
}
... ... @@ -2166,10 +2213,14 @@ Handling Information
export default {
components: {
TodoList,
Consigner,Consignee
},
data(){
return {
drawer: false,
uploadFileList: [],
batchFileListResult:[],
hidden: ['a1', 'a2', 'a3', 'a4', 'a5','a6'],
// 主单
activeName: 'first',
... ... @@ -2484,9 +2535,18 @@ Handling Information
fileContent: null,
currentDate:new Date(),
dialogVisible2:false,
uploadProgress: {
total: 0, // 总文件数
processed: 0, // 已处理文件数
percent: 0, // 进度百分比
currentFile: '' // 当前处理的文件名
},
}
},
methods:{
batchFile(){
this.drawer = true;
},
handlePaste(event, maxLength) {
// 阻止默认的粘贴行为
event.preventDefault();
... ... @@ -2792,8 +2852,8 @@ Handling Information
})
},
//新增主运单
addFwb() {
//新增FWB主运单的属性设置方法
addFwbWithSet(){
this.form.rtd.rtd_gross_weight=this.form.bill.quantity_weight;
this.form.rtd.rtd_number_pieces=this.form.bill.quantity_picecs;
this.form.rtd.rtd_volume=this.form.bill.quantity_volume;
... ... @@ -2811,6 +2871,10 @@ Handling Information
this.form.oci.push(this.cne_oci);
this.form.cne.cne_contacts.push(this.cne_contact);
this.form.nfy.nfy_contacts.push(this.nfy_contact);
},
//新增主运单
addFwb() {
this.addFwbWithSet();
/*进行表单的预验证*/
this.$refs.apply_formRef.validate(valid => {
// 未通过，表单预校验
... ... @@ -2820,10 +2884,10 @@ Handling Information
//添加调度记录信息,失败
if (res.code !== '200'){
return this.$message.error(res.msg);
}
}else {
this.$message.success(res.msg);
}
Object.assign(this.$data, this.$options.data());
}).catch(error => {
this.form.oci=[];
this.$message.error(error.toString());
... ... @@ -2944,11 +3008,22 @@ Handling Information
//批量尺寸信息识别
convertAndCalculateVolume() {
let _this= this;
this.$confirm('是否需要根据录入的尺寸信息生成详细的尺寸计算数据表,此操作会往表里面添加新的尺寸数据', '提示', {
return this.$confirm('是否需要根据录入的尺寸信息生成详细的尺寸计算数据表,此操作会往表里面添加新的尺寸数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
_this.convertAndCalculateVolumeTool();
}).catch((e) => {
this.$message({
type: 'error',
message: '已取消'+e
});
});
},
// 尺寸识别方法
convertAndCalculateVolumeTool(){
let _this= this;
let text = this.dimension_textarea.trim().replaceAll("*","x");
text = text.replaceAll("CM","");
text = text.replaceAll("cm","");
... ... @@ -3006,7 +3081,7 @@ Handling Information
type: 'error',
message: '行:'+ line +'尺寸格式错误! 录入信息支持 数字和Xx*- '
});
return ;
throw new Error('行:'+ line +'尺寸格式错误! 录入信息支持 数字和Xx*- ');
}
}
if (totalVolume>0){
... ... @@ -3017,12 +3092,6 @@ Handling Information
converted: output.trim(),
totalVolume: totalVolume
};
}).catch((e) => {
this.$message({
type: 'error',
message: '已取消'+e.message
});
});
},
cancleBtn(){
Object.assign(this.$data, this.$options.data());
... ... @@ -3079,20 +3148,12 @@ Handling Information
const AF38 = (worksheet['AF38'] && worksheet['AF38'].v) || '';
//判定acc 中是否包含COU 特殊操作代码
const S10 = (worksheet['S10'] && worksheet['S10'].v) || '';
if (S10.includes("COU")){
this.sphCodes += "COU"
}
if(I18.includes("/")){
const inFlightInfo = I18.split('/');
const outFlightInfo = M18.split('/');
const inFlightNumber = inFlightInfo[0];
const inFlightDate = inFlightInfo.length > 1 ? inFlightInfo[1].split(' ')[0] : '';
const outFlightNumber = outFlightInfo[0];
const outFlightDate = outFlightInfo.length > 1 ? outFlightInfo[1].split(' ')[0] : '';
const tempDate=this.NumberToDate(M18);
const outFlightDate=tempDate.split('/')[2];
const SSRInfo = A20.replace(/[^a-zA-Z0-9\s]/g, '');
//const signatureDate = parseCustomDate(O38);
const formattedAF23 = formatAF23(AF23);
... ... @@ -3104,16 +3165,15 @@ Handling Information
K16: K16,
L16: L16,
S16: S16,
inFlightNumber: inFlightNumber,
inFlightDate: inFlightDate,
outFlightNumber: outFlightNumber,
outFlightDate: outFlightDate,
//outFlightDate: outFlightDate,
I18:I18,
SSRInfo: SSRInfo,
A22: A22,
C22: C22,
K22: K22,
P22: P22,
U22: U22,
M18: outFlightDate,
AF22: cleanString(AF22),
AF23: formattedAF23,
O34: cleanString(O34),
... ... @@ -3121,42 +3181,169 @@ Handling Information
X38: X38,
AF38: cleanString(AF38),
};
this.form.bill.waybillNum=this.fileContent.AF1;
this.form.cvd.cvd_currency_code=this.fileContent.S16;
this.form.rtg.destinationAirport=this.fileContent.A16;
this.form.rtg.destinationCarrier=this.fileContent.C16;
this.form.rtg.onwardAirport=this.fileContent.K16;
this.form.rtg.onwardCarrier=this.fileContent.L16;
this.form.flt.cariier=this.fileContent.inFlightNumber.substring(0,2);
this.form.flt.day=this.fileContent.inFlightDate.substring(0,2);
this.form.flt.flightNumber=this.fileContent.inFlightNumber.substring(2);
this.form.flt.cariier2=this.fileContent.outFlightNumber.substring(0,2);
this.form.flt.day2=this.fileContent.outFlightDate.substring(0,2);
this.form.flt.flightNumber2=this.fileContent.outFlightNumber.substring(2);
this.form.flt.cariier=this.fileContent.I18.substring(0,2);
this.form.flt.day=this.fileContent.M18;
this.form.flt.flightNumber=this.fileContent.I18.substring(2);
this.ssr_content=this.fileContent.SSRInfo;
this.form.bill.quantity_picecs=this.fileContent.A22;
this.form.bill.quantity_weight=parseFloat(this.fileContent.C22).toFixed(2);
this.form.rtd.rtd_charge_weight=parseFloat(this.fileContent.K22).toFixed(2);
this.form.rtd.rtd_rate_charge=this.fileContent.P22;
this.form.rtd.rtd_total=parseFloat(this.fileContent.U22).toFixed(2);
this.form.ppd.ppd_weight_amount=parseFloat(this.fileContent.U22).toFixed(2);
this.form.ppd.ppd_charge_summary_total=parseFloat(this.fileContent.U22).toFixed(2);
this.form.rtd.rtd_rate_charge='';
this.form.rtd.rtd_goods_DES=this.fileContent.AF22;
this.form.cer.cer_signature=this.fileContent.O34;
this.form.isu.isu_signature=this.fileContent.AF38;
this.dimension_textarea=this.fileContent.AF23;
//this.convertAndCalculateVolume();
this.form.isu.isu_day_mounth_year=this.formattedDate();
}else{
console.log(M18)
//尺寸处理
this.convertAndCalculateVolumeTool();
//发货人信息
const A3_ShipInfo = (worksheet['A3'] && worksheet['A3'].v) || '';
//收货人信息
const A7_CNEInfo = (worksheet['A7'] && worksheet['A7'].v) || '';
//收发货人处理
const dify_para_ship = {
"inputs": {
"logisticsInformation": A3_ShipInfo
},
"response_mode": "blocking",
"user": "C6"
}
const dify_api_token = 'app-1jFyrO64582meeymRG219FdK'
return getInfo(dify_para_ship, dify_api_token)
.then(response => {
let response_data = response.data;
let CompletionResponse = response_data.data;
// 获取dify 执行状态结果
let excute_result = CompletionResponse.status;
if ("succeeded" === excute_result) {
// 获取返回信息
let result = CompletionResponse.outputs.text;
// 返回的json字符串转换成JSON对象,todo:后续对收发货人内容进行字符串过滤,或者在dify后端过滤
let shipOrCneInfo = JSON.parse(result);
this.form.shp.shp_adr = shipOrCneInfo.address;
this.form.shp.shp_name = shipOrCneInfo.name;
this.form.shp.shp_country = shipOrCneInfo.country;
this.form.shp.shp_loc_place = shipOrCneInfo.city;
this.shp_contact.contact_number = shipOrCneInfo.phoneNum;
this.shp_oci.oci_csrc_info = shipOrCneInfo.enterpriseRegistrationCode;
// 构建下一个请求参数
const dify_para_cne = {
"inputs": {
"logisticsInformation": A7_CNEInfo
},
"response_mode": "blocking",
"user": "C6"
};
// 返回下一个 API 调用的 Promise
return getInfo(dify_para_cne, dify_api_token);
} else {
throw new Error("人工智能助手执行错误");
}
})
.then(response => {
let response_data = response.data;
let CompletionResponse = response_data.data;
// 获取dify 执行状态结果
let excute_result = CompletionResponse.status;
if ("succeeded" === excute_result) {
// 获取返回信息
let result = CompletionResponse.outputs.text;
// 返回的json字符串转换成JSON对象,todo:后续对收发货人内容进行字符串过滤,或者在dify后端过滤
let cneInfo = JSON.parse(result);
this.form.cne.cne_adr = cneInfo.address;
this.form.cne.cne_name = cneInfo.name;
this.form.cne.cne_country = cneInfo.country;
this.form.cne.cne_loc_place = cneInfo.city;
this.cne_contact.contact_number = cneInfo.phoneNum;
this.cne_oci.oci_csrc_info = cneInfo.enterpriseRegistrationCode;
} else {
throw new Error("人工智能助手执行错误");
}
//返回下个promise
return new Promise((resolve, reject) => {
resolve({success:true,code:'200'});
});
})
.then(response=>{
alert('执行提交'+JSON.stringify(response))
//导入后提交
// this.addFwb();
return {success:true,code:'200'};
})
.catch(e => {
this.$message({
type: 'error',
message: e.message
});
return {success:false,code:'400'};
});
} else {
this.fileContent = { AF1: '工作表不存在' };
}
};
reader.readAsArrayBuffer(files);
},
// 异步处理
fileBatchHandle(file){
return new Promise((resolve, reject) => {
const files = file.raw;
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
const worksheetName = '格式化打印'; // 指定工作表名称
const worksheet = workbook.Sheets[worksheetName];
if (worksheet) {
const AF1 = (worksheet['AF1'] && worksheet['AF1'].v) || '';
const A16 = (worksheet['A16'] && worksheet['A16'].v) || '';
const C16 = (worksheet['C16'] && worksheet['C16'].v) || '';
const K16 = (worksheet['K16'] && worksheet['K16'].v) || '';
const L16 = (worksheet['L16'] && worksheet['L16'].v) || '';
const S16 = (worksheet['S16'] && worksheet['S16'].v) || '';
const I18 = (worksheet['I18'] && worksheet['I18'].v) || '';
const M18 = (worksheet['M18'] && worksheet['M18'].v) || '';
const A20 = (worksheet['A20'] && worksheet['A20'].v) || '';
const A22 = (worksheet['A22'] && worksheet['A22'].v) || '';
const C22 = (worksheet['C22'] && worksheet['C22'].v) || '';
const K22 = (worksheet['K22'] && worksheet['K22'].v) || '';
const P22 = (worksheet['P22'] && worksheet['P22'].v) || '';
const U22 = (worksheet['U22'] && worksheet['U22'].v) || '';
const AF22 = (worksheet['AF22'] && worksheet['AF22'].v) || '';
const AF23 = (worksheet['AF23'] && worksheet['AF23'].v) || '';
const O34 = (worksheet['O34'] && worksheet['O34'].v) || '';
//const O38 = (worksheet['O38'] && worksheet['O38'].v) || '';
const X38 = (worksheet['X38'] && worksheet['X38'].v) || '';
const AF38 = (worksheet['AF38'] && worksheet['AF38'].v) || '';
//判定acc 中是否包含COU 特殊操作代码
const S10 = (worksheet['S10'] && worksheet['S10'].v) || '';
if (S10.includes("COU")){
this.sphCodes += "COU"
}
const tempDate=this.NumberToDate(M18);
const outFlightDate=tempDate.split('/')[2];
const SSRInfo = A20.replace(/[^a-zA-Z0-9\s]/g, '');
//const signatureDate = parseCustomDate(O38);
const formattedAF23 = formatAF23(AF23);
this.fileContent = {
AF1: AF1,
A16: A16,
... ... @@ -3180,7 +3367,7 @@ Handling Information
X38: X38,
AF38: cleanString(AF38),
};
//this.convertAndCalculateVolume();
this.form.bill.waybillNum=this.fileContent.AF1;
this.form.cvd.cvd_currency_code=this.fileContent.S16;
this.form.rtg.destinationAirport=this.fileContent.A16;
... ... @@ -3201,14 +3388,172 @@ Handling Information
this.dimension_textarea=this.fileContent.AF23;
this.form.isu.isu_day_mounth_year=this.formattedDate();
//尺寸处理
this.convertAndCalculateVolumeTool();
//发货人信息
const A3_ShipInfo = (worksheet['A3'] && worksheet['A3'].v) || '';
//收货人信息
const A7_CNEInfo = (worksheet['A7'] && worksheet['A7'].v) || '';
//收发货人处理
const dify_para_ship = {
"inputs": {
"logisticsInformation": A3_ShipInfo
},
"response_mode": "blocking",
"user": "C6"
}
const dify_api_token = 'app-1jFyrO64582meeymRG219FdK'
getInfo(dify_para_ship, dify_api_token)
.then(response => {
let response_data = response.data;
let CompletionResponse = response_data.data;
// 获取dify 执行状态结果
let excute_result = CompletionResponse.status;
if ("succeeded" === excute_result) {
// 获取返回信息
let result = CompletionResponse.outputs.text;
// 返回的json字符串转换成JSON对象,todo:后续对收发货人内容进行字符串过滤,或者在dify后端过滤
let shipOrCneInfo = JSON.parse(result);
this.form.shp.shp_adr = shipOrCneInfo.address;
this.form.shp.shp_name = shipOrCneInfo.name;
this.form.shp.shp_country = shipOrCneInfo.country;
this.form.shp.shp_loc_place = shipOrCneInfo.city;
this.shp_contact.contact_number = shipOrCneInfo.phoneNum;
this.shp_oci.oci_csrc_info = shipOrCneInfo.enterpriseRegistrationCode;
// 构建下一个请求参数
const dify_para_cne = {
"inputs": {
"logisticsInformation": A7_CNEInfo
},
"response_mode": "blocking",
"user": "C6"
};
// 返回下一个 API 调用的 Promise
return getInfo(dify_para_cne, dify_api_token);
} else {
throw new Error("人工智能助手执行错误");
}
})
.then(response => {
let response_data = response.data;
let CompletionResponse = response_data.data;
// 获取dify 执行状态结果
let excute_result = CompletionResponse.status;
if ("succeeded" === excute_result) {
// 获取返回信息
let result = CompletionResponse.outputs.text;
// 返回的json字符串转换成JSON对象,todo:后续对收发货人内容进行字符串过滤,或者在dify后端过滤
let cneInfo = JSON.parse(result);
this.form.cne.cne_adr = cneInfo.address;
this.form.cne.cne_name = cneInfo.name;
this.form.cne.cne_country = cneInfo.country;
this.form.cne.cne_loc_place = cneInfo.city;
this.cne_contact.contact_number = cneInfo.phoneNum;
this.cne_oci.oci_csrc_info = cneInfo.enterpriseRegistrationCode;
} else {
throw new Error("人工智能助手执行错误");
}
//主单提交
this.addFwbWithSet();
/*进行表单的预验证*/
this.$refs.apply_formRef.validate(valid => {
// 未通过，表单预校验
if (!valid) {
this.form.oci=[];
throw new Error("表单未通过校验");
}
})
// return {data:{ success: true, code: '200',message:'testOK' }}
return fwb(this.form);
})
.then(response=>{
let res = response.data;
//添加调度记录信息,失败
if (res.code === '200'){
this.$message.success(res.msg);
// 返回成功结果
resolve({ success: true, code: '200' });
}else {
this.$message.error(res.msg);
throw new Error("后端报错"+res.msg);
}
})
.catch(error => {
this.$message({
type: 'error',
message: '接口访问报错' + error.message
});
reject(error);
});
} else {
this.fileContent = { AF1: '工作表不存在' };
}
}catch (error){
reject(error);
}
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsArrayBuffer(files);
this.convertAndCalculateVolume();
}); // 返回 Promise
},
async batchFileUpload(file,fileList){
// alert(JSON.stringify(file))
// alert(JSON.stringify(fileList))
// alert(JSON.stringify(this.uploadFileList))
let _this = this;
if (fileList && fileList.length === this.uploadFileList.length + 1){
this.uploadFileList = fileList;
// 初始化进度
this.uploadProgress = {
total: fileList.length,
processed: 0,
percent: 0,
currentFile: ''
};
for(const [index, item] of fileList.entries()){
try {
// 更新当前处理文件名
this.uploadProgress.currentFile = `正在处理第 ${index + 1} 个文件: ${item.name}`;
const result = await this.fileBatchHandle(item);//等待异步结果
_this.$message.success(JSON.stringify(result));
if (result.code === '200'){
item.done = true;
//文件处理状态
}else{
item.done = false;
_this.$message.error(item.name+ ' 发送报文失败:');
}
this.batchFileListResult.push(item)
}catch (error){
_this.$message.error(item.name+ ' 处理文件失败:',error);
item.done = false;
this.batchFileListResult.push(item);
}finally {
// 更新进度
this.uploadProgress.processed += 1;
this.uploadProgress.percent = Math.round(
(this.uploadProgress.processed / this.uploadProgress.total) * 100
);
alert('总进度:'+this.uploadProgress.percent+'/当前已处理:'+this.uploadProgress.processed +"/总文件数量:"+ this.uploadProgress.total)
}
// 清空当前处理文件名
this.uploadProgress.currentFile = '';
}
}
},
formattedDate() {
// 格式化日期为 yyyy-MM-dd
... ... @@ -3387,5 +3732,10 @@ Handling Information
display: inline-block;
margin-left: 40px;
}
.progress-text {
margin-top: 8px;
color: #666;
font-size: 14px;
}
</style>
... ...
<template>
<section class="todoapp">
<!-- header -->
<header class="header">
<input class="new-todo" autocomplete="off" placeholder="处理文件列表" @keyup.enter="addTodo">
</header>
<!-- main section -->
<section v-show="todos.length" class="main">
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
<label for="toggle-all" />
<ul class="todo-list">
<todo
v-for="(todo, index) in filteredTodos"
:key="index"
:todo="todo"
@toggleTodo="toggleTodo"
@editTodo="editTodo"
@deleteTodo="deleteTodo"
/>
</ul>
</section>
<!-- footer -->
<footer v-show="todos.length" class="footer">
<span class="todo-count">
<strong>{{ remaining }}</strong>
{{ remaining | pluralize('个文件') }} 处理失败
</span>
<ul class="filters">
<li v-for="(val, key) in filters" :key="key">
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
</li>
</ul>
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
Clear completed
</button> -->
</footer>
</section>
</template>
<script>
import Todo from '@/views/dashboard/components/TodoList/Todo.vue'
const STORAGE_KEY = 'todos'
const filters = {
all: todos => todos,
active: todos => todos.filter(todo => !todo.done),
completed: todos => todos.filter(todo => todo.done)
}
const defalutList = [
{ text: '78406346432', done: false },
{ text: '78406305165_JHJ42194', done: false },
{ text: '78406347272', done: false },
{ text: '78406346782_DIM896002168', done: true },
{ text: 'vue', done: true },
{ text: 'element-ui', done: true },
{ text: 'axios', done: true },
{ text: 'webpack', done: true }
]
export default {
components: { Todo },
props: {
uploadFileList: {
type: Array,
default: () => []
}
},
filters: {
pluralize: (n, w) => n === 1 ? w : w + ' ',
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
},
data() {
return {
visibility: 'all',
filters,
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
todos: [],
initialLoad: true
}
},
watch: {
uploadFileList(newVal) {
this.initialLoad = false;
if (!this.initialLoad && newVal.length > this.todos.length) {
const newItems = newVal.map(file => ({
text: file.name,
done: file.done
}));
this.todos = newItems;
}
// this.$message.success('任务组件初始化成功');
}
},
computed: {
allChecked() {
return this.todos.every(todo => todo.done)
},
filteredTodos() {
return filters[this.visibility](this.todos)
},
remaining() {
return this.todos.filter(todo => !todo.done).length
}
},
mounted:function () {
},
methods: {
setLocalStorage() {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
},
addTodo(e) {
const text = e.target.value
if (text.trim()) {
this.todos.push({
text,
done: false
})
this.setLocalStorage()
}
e.target.value = ''
},
toggleTodo(val) {
val.done = !val.done
this.setLocalStorage()
},
deleteTodo(todo) {
this.todos.splice(this.todos.indexOf(todo), 1)
this.setLocalStorage()
},
editTodo({ todo, value }) {
todo.text = value
this.setLocalStorage()
},
clearCompleted() {
this.todos = this.todos.filter(todo => !todo.done)
this.setLocalStorage()
},
toggleAll({ done }) {
this.todos.forEach(todo => {
todo.done = done
this.setLocalStorage()
})
}
}
}
</script>
<style lang="scss">
@import '~@/views/dashboard/components/TodoList/index.scss';
</style>
... ...