策略模块

今天遇到一个很好的大哥哥，必须表扬一下嘿嘿

不厌其烦的给我指点，哇塞，太棒啦
言归正传，首先我们得先去导入基础代码，不讲了，然后是对于页面的基础布局，

然后我们先来修改新增对话框，

需要改动的就是将策略方案设置成数字框，接下来就是查看详细

这里我们首先先增加一个按钮去绑定事件，然后去查找，创建一个集合去接受数据，
这里因为我们需要查找的是关于策略相同的地区的，所以我们应该在需要传递的参数里面加上关于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();
}

关于成功回调函数，就是去将响应式对象里面的文件进行清理，然后将加载的形式去除，再次查询。
后端：