AI+若依框架（实战篇）-后转
策略模块
今天遇到一个很好的大哥哥，必须表扬一下嘿嘿
不厌其烦的给我指点，哇塞，太棒啦
言归正传，首先我们得先去导入基础代码，不讲了，然后是对于页面的基础布局，
然后我们先来修改新增对话框，
需要改动的就是将策略方案设置成数字框，接下来就是查看详细
这里我们首先先增加一个按钮去绑定事件，然后去查找，创建一个集合去接受数据，
这里因为我们需要查找的是关于策略相同的地区的，所以我们应该在需要传递的参数里面加上关于id的值，这里大家要是用的是row.id的话有时候可能不对，这时候我我们可以去输出打印出来row的值，然后看看哪个是我们需要的字段的值，这里需要注意的是关于策略的名称的展示，视频里面可以进行展示，但是我这里没法展示，所以我又去调了一下api去返回表单的值。
接下里讲一下关于策略分配的改造，
首先就是需要创建一个对话框，然后这里面需要注意的值我们在进行表单的校验的时候必须使用machineRef不然在下面公用提交表单的时候没法通过校验，然后就是向后端去发送请求
这里面使用的是前端进行相应的值，就是拿到那一行的对象，然后直接进行返回就行。
商品管理
这里我们还是先需要根据页面原型来生成前端的基础代码，这里就不进行详细进行讲解，我们直接来讲解业务。
关于前端的基础界面也不讲了，课程听到这里前面进行展示的效果大家应该都已经把业务跑熟练了，这里粗略讲解一下，就是向后端发送请求，然后使用循环来进行遍历，这里主包当时遇到一个很好玩的事情，当时主包在进行回显查询的时候
当时不是封装给表单嘛，但是主包当时纯了，直接变成循环了，所以展示的就是一个没有数据回显的下拉列表。
这里是直接拷贝的，需要注意的是代理后面那一块，必须和表单上面的响应式数据一直，不然会报错。
关于商品的删除，我们在这里面没有使用数据库的外键，是让我们后端来进行使用逻辑外键来约束，
商品的批量导入： 对于这个我们来细细探讨，先来讲前端，首先我们需要先新增一个按钮，里面来设置函数，去打开上传文件的对话框，
这里面去定义一个响应式的空对象uploadRef用来获取我们进行提交的文件，这里我们直接去饿了么官网去看，然后就是关于前端的检验了，因为我们在上传的时候需要提交，所以我们首先先在提交按钮里面去通过响应式数据里面的submit进行提交，这里面因为在官网里面是使用的是ts，所以我们加个if判断就行，然后就是上传，这里面的action就是需要上传的路径，由于我们在开发环境里面，所以我们需要使用代理来进行转发请求，还要在发送的请求里面进行加上header
这里是直接copy若依框架里面的图片上传的代码，到这里，一个文件的上传就基本搞定了，但是因为我们需要上传的是一个excel文件，所以我们在这里需要进行判断是不是我们所需要的文件，所以我们就需要在上传前加上判断，要不是的话就直接显示文件格式错误，也不进行上传
/** excel上传 */
const uploadRef=ref({});
function submitUpload() { if (uploadRef.value!== null) { uploadRef.value.submit();}
}const props = defineProps({modelValue: [String, Object, Array],// 文件数量限制limit: {type: Number,default: 1,},// 大小限制(MB)fileSize: {type: Number,default:1,},// 文件类型, 例如[xls,xlsx]fileType: {type: Array,default: () => ["xls", "xlsx"],}
});
// 上传成功回调
function handleUploadSuccess(res, file) {if (res.code === 200) {proxy.$modal.msgSuccess("上传成功");importOpen.value = false;getList();} else {proxy.$modal.msgError("上传文件失败");}uploadRef.value.clearFiles();proxy.$modal.closeLoading();}
// 上传失败
function handleUploadError() {proxy.$modal.msgError("上传文件失败");uploadRef.value.clearFiles();proxy.$modal.closeLoading();
}// 上传前loading加载
function handleBeforeUpload(file) {let isExcel = false;if (props.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isExcel = props.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} if (!isExcel) {proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);return false;}if (props.fileSize) {const isLt = file.size / 1024 / 1024 < props.fileSize;if (!isLt) {proxy.$modal.msgError(`上传excel大小不能超过 ${props.fileSize} MB!`);return false;}}proxy.$modal.loading("正在上传excel，请稍候...");
}
那你肯定是需要定义一个检验的规则，这里就是在加载之前了
// 上传前loading加载
function handleBeforeUpload(file) {let isExcel = false;if (props.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isExcel = props.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} if (!isExcel) {proxy.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join("/")}格式文件!`);return false;}if (props.fileSize) {const isLt = file.size / 1024 / 1024 < props.fileSize;if (!isLt) {proxy.$modal.msgError(`上传excel大小不能超过 ${props.fileSize} MB!`);return false;}}proxy.$modal.loading("正在上传excel，请稍候...");
}const props = defineProps({modelValue: [String, Object, Array],// 文件数量限制limit: {type: Number,default: 1,},// 大小限制(MB)fileSize: {type: Number,default:1,},// 文件类型, 例如[xls,xlsx]fileType: {type: Array,default: () => ["xls", "xlsx"],}
});这里面进行判断，需要改动的基本没有。然后我们在上传成功的时候，下次上传还是存在上次上传的文件，那么我是不是应该去改动，对了，这就到了
// 上传成功回调
function handleUploadSuccess(res, file) {if (res.code === 200) {proxy.$modal.msgSuccess("上传成功");importOpen.value = false;getList();} else {proxy.$modal.msgError("上传文件失败");}uploadRef.value.clearFiles();proxy.$modal.closeLoading();}
// 上传失败
function handleUploadError() {proxy.$modal.msgError("上传文件失败");uploadRef.value.clearFiles();proxy.$modal.closeLoading();
}关于成功回调函数，就是去将响应式对象里面的文件进行清理，然后将加载的形式去除，再次查询。
后端：