1.图片上传。2.物料图纸3.字典

src/components/Upload/SingleUpload.vue

@@ -8,7 +8,7 @@
     :before-upload="handleBeforeUpload"
     :http-request="uploadFile"
   >
-    <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
+    <img v-if="imgUrl" :src="photoSource" class="single-uploader__image" />
     <el-icon v-else class="single-uploader__icon"><i-ep-plus /></el-icon>
   </el-upload>
 </template>
@@ -32,6 +32,7 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue"]);
 const imgUrl = useVModel(props, "modelValue", emit);
+const photoSource = ref<string>("");
 
 /**
  * 自定义图片上传
@@ -43,7 +44,8 @@ async function uploadFile(options: UploadRequestOptions): Promise<any> {
   //绝对路径
   // imgUrl.value = import.meta.env.VITE_APP_UPLOAD_URL + res.data;
   //使用相对路径
-  imgUrl.value = res.data;
+  imgUrl.value = res.data + "";
+  photoSource.value = import.meta.env.VITE_APP_UPLOAD_URL + res.data;
 }
 
 /**

src/hooks/userCrud.ts

@@ -112,14 +112,13 @@ export const useCrud = (config?: UseCrudConfig) => {
           },
         });
         if (res?.data) {
-		  if(res?.data instanceof Array){
-			 data.value = res?.data || []
-			 page.value.total = res?.data?.length || 0
-		  }else{
-			data.value = res?.data?.records || [];
-			page.value.total = res?.data?.totalCount || 0;
-		  }
-
+          if (res?.data instanceof Array) {
+            data.value = res?.data || [];
+            page.value.total = res?.data?.length || 0;
+          } else {
+            data.value = res?.data?.records || [];
+            page.value.total = res?.data?.totalCount || 0;
+          }
         }
         config?.done && config?.done();
       } catch (err) {
@@ -152,7 +151,6 @@ export const useCrud = (config?: UseCrudConfig) => {
       }
     },
     createRow: (row: any, done: () => void, loading: () => void) => {
-      console.info(row);
       save({ row: row, done: done, loading: loading });
     },
 

src/store/modules/dictionary.ts

@@ -24,7 +24,7 @@ export const useDictionaryStore = defineStore("dictionaryStore", () => {
     "trace_type",
     "skill_type",
   ];
-  const dicts = ref<{ string?: any[] }>({});
+  const dicts = ref<{ [key: string]: any[] }>({});
   function checkDicts() {
     if (JSON.stringify(dicts.value) === "{}") {
       getUserDicts(types).then((res) => {

src/views/base/materials/components/drawing-page.vue

@@ -1,13 +1,6 @@
 <template>
-
-
   <div class="mainContentBox">
-    <avue-form
-      ref="formRef"
-      v-model="form"
-      :option="option"
-      @submit="rowSave"
-    >
+    <avue-form ref="formRef" v-model="form" :option="option" @submit="rowSave">
       <template #drawingPath="scope">
         <single-upload v-model="form.drawingPath" />
       </template>
@@ -29,7 +22,6 @@
       @selection-change="selectionChange"
       search-option="false"
     >
-
       <template #menu-left="{ size }">
         <el-button
           :disabled="toDeleteIds.length < 1"
@@ -37,10 +29,9 @@
           icon="el-icon-delete"
           :size="size"
           @click="multipleDelete"
-        >删除</el-button
+          >删除</el-button
         >
       </template>
-
     </avue-crud>
     <CommonTable
       ref="ctableRef"
@@ -49,183 +40,176 @@
       @selected-sure="onSelectedFinish"
     />
   </div>
-
 </template>
 <script setup>
-  import { ref, getCurrentInstance } from "vue";
-  import { useCrud } from "@/hooks/userCrud";
-  import ButtonPermKeys from "@/common/configs/buttonPermission";
-  import { useCommonStoreHook } from "@/store";
-
-  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
-  import { useDictionaryStoreHook } from "@/store";
-  import {
-    addStationDevice,
-  } from "@/api/station";
-  const test = () => {
-    isShowTable.value = true;
-    tableType.value = tableType.value == 1 ? 2 : 1;
-  };
-
-  // 传入一个url，后面不带/
-  const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
-    useCrud({
-      src: "/api/v1/base/drawing",
-    });
-  const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
-    Methords; //增删改查
-  const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
-  const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
-  // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
-  // const permission = reactive({
-  //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
-  //   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
-  //   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
-  //   menu: true,
-  // });
-  function rowSave(form2,done,loading) {
-    form.value.associationCode=props.materialCode;
-    createRow(form,done,loading);
-
-  }
-
-
-
-  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-
-  onMounted(() => {
-    // console.log("crudRef", crudRef)
-    search.value.materialCode=props.materialCode;
-    dataList();
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import ButtonPermKeys from "@/common/configs/buttonPermission";
+import { useCommonStoreHook } from "@/store";
+
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+import { useDictionaryStoreHook } from "@/store";
+import { addStationDevice } from "@/api/station";
+const test = () => {
+  isShowTable.value = true;
+  tableType.value = tableType.value == 1 ? 2 : 1;
+};
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/base/drawing",
   });
-
-  /**
-   * 上传excel相关
-   */
-  const uploadRef = ref(null);
-  const uploadFinished = () => {
-    // 上传完成后的刷新操作
-    page.currentPage = 1;
-    dataList();
-  };
-  const importExcelData = () => {
-    if (uploadRef.value) {
-      uploadRef.value.show("/api/v1/base/stationDevice");
-    }
-  };
-  const ctableRef=ref(null);
-  const deviceList=()=>{
-    ctableRef.value.startSelect();
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+// checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
+// const permission = reactive({
+//   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
+//   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
+//   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
+//   menu: true,
+// });
+function rowSave(form2, done) {
+  form.value.associationCode = props.materialCode;
+  createRow(form, done, done);
+}
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+onMounted(() => {
+  // console.log("crudRef", crudRef)
+  search.value.materialCode = props.materialCode;
+  dataList();
+});
+
+/**
+ * 上传excel相关
+ */
+const uploadRef = ref(null);
+const uploadFinished = () => {
+  // 上传完成后的刷新操作
+  page.currentPage = 1;
+  dataList();
+};
+const importExcelData = () => {
+  if (uploadRef.value) {
+    uploadRef.value.show("/api/v1/base/stationDevice");
   }
+};
+const ctableRef = ref(null);
+const deviceList = () => {
+  ctableRef.value.startSelect();
+};
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  selection: true,
+  column: [
+    {
+      label: "物料编号",
+      prop: "associationCode",
+      hide: true,
+      display: false,
+    },
 
-  // 设置表格列或者其他自定义的option
-  option.value = Object.assign(option.value, {
-    selection: true,
-    column: [
-      {
-        label: "物料编号",
-        prop: "associationCode",
-        hide:true,
-        display:false,
-      },
-
-
-      {
+    {
       label: "图纸编号",
       prop: "drawingCode",
-      rules: [{
-        required: true,
-        message: "图纸编号不能为空",
-        trigger: "blur"
-      }]
+      rules: [
+        {
+          required: true,
+          message: "图纸编号不能为空",
+          trigger: "blur",
+        },
+      ],
     },
-      {
-        label: "图纸标题",
-        prop: "drawingTitle",
-        rules: [{
+    {
+      label: "图纸标题",
+      prop: "drawingTitle",
+      rules: [
+        {
           required: true,
           message: "图纸名称不能为空",
-          trigger: "blur"
-        }],
-      },
-
-
-      {
-        label: "图纸类型",
-        prop: "drawingDictValue",
-        value:"material",
-        display: false,
-        hide:true,
-      },
-      {
-        label: "排序",
-        prop: "sort",
-        type:"number",
+          trigger: "blur",
+        },
+      ],
+    },
 
-      },
-      {
-        label: "版本",
-        prop: "drawingVersion",
-        type:"number",
-        precision:1,
-        rules: [{
+    {
+      label: "图纸类型",
+      prop: "drawingDictValue",
+      value: "material",
+      display: false,
+      hide: true,
+    },
+    {
+      label: "排序",
+      prop: "sort",
+      type: "number",
+    },
+    {
+      label: "版本",
+      prop: "drawingVersion",
+      type: "number",
+      precision: 1,
+      rules: [
+        {
           required: true,
           message: "版本号不能为空",
-          trigger: "blur"
-        }]
-
-
-      },
-      {
-        label: "图纸上传",
-        prop: "drawingPath",
-        span: 24,
-        slot: true,
-        hide:true,
-        /*formatter: (row, column, cellValue, index) => {
+          trigger: "blur",
+        },
+      ],
+    },
+    {
+      label: "图纸上传",
+      prop: "drawingPath",
+      span: 24,
+      slot: true,
+      hide: true,
+      /*formatter: (row, column, cellValue, index) => {
           return `<img src="${row.drawingPath}" alt="${row.drawingPath}" width="50" height="50">`;
         }
 */
-      },
-      {
-        label: "图纸",
-        prop: "drawing",
-        type: 'img',
-        span: 24,
-        display:false,
-        slot: true,
-        formatter: (row, column, cellValue, index) => {
+    },
+    {
+      label: "图纸",
+      prop: "drawing",
+      type: "img",
+      span: 24,
+      display: false,
+      slot: true,
+      formatter: (row, column, cellValue, index) => {
         return `${row.drawingPath}`;
-    }
+      },
+    },
+  ],
+  delBtn: false,
+  editBtn: false,
+  viewBtn: false,
+  addBtn: false,
+  menu: false,
+});
+const props = defineProps({
+  materialCode: {
+    type: String,
+    default: () => {
+      return 0;
+    },
   },
-      ],
-    delBtn: false,
-    editBtn: false,
-    viewBtn: false,
-    addBtn:false,
-    menu: false,
-  });
-  const props = defineProps({
-    materialCode: {
-      type: String,
-      default: () => {
-        return 0;
-      }
+  dialog: {
+    type: Object,
+    default: () => {
+      return {};
     },
-    dialog:{
-      type:Object,
-      default:()=>{
-        return {};
-      }
-    }
-  })
-
-  const onSelectedFinish=(selectedValue)=>{
+  },
+});
 
-    form.value.materialCode=selectedValue.materialCode;
-    form.value.materialName=selectedValue.materialName;
+const onSelectedFinish = (selectedValue) => {
+  form.value.materialCode = selectedValue.materialCode;
+  form.value.materialName = selectedValue.materialName;
 
-    form.value.productionLineId=props.productionLineId;
-  }
+  form.value.productionLineId = props.productionLineId;
+};
 </script>
-