提交web资产详情

src/views/assetsManage2/webZC/index.vue

@@ -40,8 +40,8 @@
             size="small"
             class="demo-form-inline"
           >
-            <el-row>
+            <el-row :gutter="30">
-              <el-col :span="7">
+              <el-col :span="8">
                 <el-form-item label="系统名称：" prop="xtmc">
                   <el-input
                     v-model="formInline.xtmc"
@@ -49,7 +49,7 @@
                   ></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="7">
+              <el-col :span="8">
                 <el-form-item label="系统类型：" prop="xtlx">
                   <el-select
                     v-model="formInline.xtlx"
@@ -65,7 +65,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="7">
+              <el-col :span="8">
                 <el-form-item label="新增时间：" prop="time">
                   <el-date-picker
                     v-model="formInline.time"
@@ -80,8 +80,8 @@
                 </el-form-item>
               </el-col>
             </el-row>
-            <el-row>
+            <el-row :gutter="30">
-              <el-col :span="7">
+              <el-col :span="8">
                 <el-form-item label="单位名称：" prop="dwmc">
                   <el-input
                     v-model="formInline.dwmc"
@@ -89,7 +89,7 @@
                   ></el-input>
                 </el-form-item>
               </el-col>
-              <el-col :span="7">
+              <el-col :span="8">
                 <el-form-item label="系统状态：" prop="xtzt">
                   <el-select
                     v-model="formInline.xtzt"
@@ -105,7 +105,7 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-              <el-col :span="9" style="text-align: right; padding-right: 35px">
+              <el-col :span="8" style="text-align: right; padding-right: 35px">
                 <el-form-item>
                   <el-button size="mini" @click="resetQuery">重置</el-button>
                   <el-button size="mini" type="primary" @click="handleQuery"
@@ -536,22 +536,18 @@ const goInfo = (row, id) => {
         type: 0,
         id: row.id,
         queryData: formInline,
-        parentName:"/assetsManage2/webZC"
+        parentName: "/assetsManage2/webZC",
-      },
-      meta: {
-        title: "新增资产",
-        icon: "user",
-        activeMenu: "/assetsManage/program",
       },
     });
   } else if (id === 2) {
     router.push({
-      name: "AssetsAuth",
+      path: "/assetsManage2/webZCinfo",
       query: {
         pageType: "change",
         type: 0,
         id: row.id,
         queryData: formInline,
+        parentName: "/assetsManage2/webZC",
       },
     });
   } else if (id === 3) {
@@ -603,3 +599,46 @@ onUnmounted(() => {
   window.removeEventListener("resize", cancalDebounce);
 });
 </script>
+<style scoped>
+::v-deep(.el-input__inner) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-select__selection) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-form-item__content) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-range-editor--small.el-input__wrapper) {
+  line-height: 32px !important;
+  height: 30px !important;
+}
+/* .el-select__wrapper .el-input__wrapper {
+    line-height: 32px;
+    height: 30px;
+  } */
+
+/* ::v-deep(.el-input__inner) {
+  line-height: 32px;
+}
+::v-deep(.el-select) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-select--small .el-select__wrapper .el-input__wrapper) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-range-editor--small) {
+  line-height: 32px;
+  height: 30px;
+}
+::v-deep(.el-form-item__content) {
+  justify-content: flex-end;
+  line-height: 32px;
+  height: 30px;
+} */
+</style>

src/views/components/myUpload/index.vue

@@ -2,11 +2,11 @@
   <div class="upload-file">
     <el-upload
       multiple
-      v-show="fileList.length == 0"
+      v-show="fileList.length === 0"
       :action="uploadFileUrl"
       :before-upload="handleBeforeUpload"
       :file-list="fileList"
-      :limit="limit"
+      :limit="props.limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
       :on-success="handleUploadSuccess"
@@ -16,7 +16,7 @@
       ref="fileUpload"
     >
       <!-- 上传按钮 -->
-      <slot v-if="fileList.length == 0"></slot>
+      <slot v-if="fileList.length === 0"></slot>
     </el-upload>
 
     <!-- 文件列表 -->
@@ -39,7 +39,7 @@
         </el-link>
         <div
           class="ele-upload-list__item-content-action"
-          v-if="$route.query.pageType != 'look'"
+          v-if="route.query.pageType !== 'look'"
         >
           <el-link :underline="false" @click="handleDelete(index)" type="danger"
             >删除</el-link
@@ -50,59 +50,72 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import useUserStore from "@/store/modules/user";
+import { ElMessage, ElLoading } from "element-plus";
 import { getToken } from "@/utils/auth";
-import Sortable from "sortablejs";
+
-
+const route = useRoute();
-export default {
+const router = useRouter();
-  name: "FileUpload",
+const userStore = useUserStore();
-  props: {
+const fileUpload = ref(null);
-    // 值
+
-    value: [String, Object, Array],
+// Props定义
-    // 数量限制
+const props = defineProps({
+  modelValue: {
+    type: [String, Object, Array],
+    default: "",
+  },
   limit: {
     type: Number,
     default: 5,
   },
-    // 大小限制(MB)
   fileSize: {
     type: Number,
     default: 5,
   },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileType: {
     type: Array,
     default: () => ["doc", "xls", "ppt", "txt", "pdf"],
   },
-    // 是否显示提示
   isShowTip: {
     type: Boolean,
     default: true,
   },
-  },
+});
-  data() {
-    return {
-      number: 0,
-      uploadList: [],
-      baseUrl:process.env.VUE_APP_HJ == "test" ? process.env.VUE_APP_BASE_API :location.origin + '/api',
 
-      uploadFileUrl: process.env.VUE_APP_HJ == "test" ? process.env.VUE_APP_BASE_API + "/common/upload" :  location.origin + '/api/common/upload',
+// Emits定义
+const emit = defineEmits(["update:modelValue"]);
 
-      headers: {
+// 响应式数据
+const number = ref(0);
+const uploadList = ref([]);
+const fileList = ref([]);
+// const baseUrl = import.meta.env.VITE_APP_BASE_API
+// const uploadFileUrl =
+const baseUrl = import.meta.env.VITE_APP_HJ === "test" ? import.meta.env.VITE_APP_BASE_API : location.origin + '/api'
+const uploadFileUrl = import.meta.env.VITE_APP_HJ === "test" ? import.meta.env.VITE_APP_BASE_API + "/common/upload" : 'http://192.168.0.112:9115/api/common/upload'
+const headers = ref({
   Authorization: "Bearer " + getToken(),
-      },
+});
-      fileList: [],
+
-    };
+// 计算属性
-  },
+const showTip = computed(() => {
-  watch: {
+  return props.isShowTip && (props.fileType || props.fileSize);
-    value: {
+});
-      handler(val) {
+
+// 监听器
+watch(
+  () => props.modelValue,
+  (val) => {
     if (val) {
       let temp = 1;
       // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(",");
+      const list = Array.isArray(val) ? val : val.split(",");
       // 然后将数组转为对象数组
-          this.fileList = list.map((item) => {
+      fileList.value = list.map((item) => {
         if (typeof item === "string") {
           item = { name: item, url: item };
         }
@@ -110,120 +123,103 @@ export default {
         return item;
       });
     } else {
-          this.fileList = [];
+      fileList.value = [];
-          return [];
     }
   },
-      deep: true,
+  { deep: true, immediate: true }
-      immediate: true,
+);
-    },
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  mounted(){
 
-    // console.log( process.env.VUE_APP_HJ,'ddfee',process.env.VUE_APP_BASE_API + "/common/upload")
+// 方法定义
-  },
+const handleBeforeUpload = (file) => {
-  methods: {
-    // 上传前校检格式和大小
-    handleBeforeUpload(file) {
   // 校检文件类型
-      if (this.fileType) {
+  if (props.fileType) {
     const fileName = file.name.split(".");
     const fileExt = fileName[fileName.length - 1];
-        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+    const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
     if (!isTypeOk) {
-          this.$modal.msgError(
+      ElMessage.error(
-            `文件格式不正确，请上传${this.fileType.join("/")}格式文件!`
+        `文件格式不正确，请上传${props.fileType.join("/")}格式文件!`
       );
       return false;
     }
   }
   // 校检文件名是否包含特殊字符
   if (file.name.includes(",")) {
-        this.$modal.msgError("文件名不正确，不能包含英文逗号!");
+    ElMessage.error("文件名不正确，不能包含英文逗号!");
     return false;
   }
   // 校检文件大小
-      if (this.fileSize) {
+  if (props.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
     if (!isLt) {
-          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+      ElMessage.error(`上传文件大小不能超过 ${props.fileSize} MB!`);
       return false;
     }
   }
-      this.$modal.loading("正在上传文件，请稍候...");
+  const loading = ElLoading.service({
-      this.number++;
+    text: "正在上传文件，请稍候...",
+  });
+  number.value++;
   return true;
-    },
+};
-    // 文件个数超出
+
-    handleExceed() {
+const handleExceed = () => {
-      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+  ElMessage.error(`上传文件数量不能超过 ${props.limit} 个!`);
-    },
+};
-    // 上传失败
+
-    handleUploadError(err) {
+const handleUploadError = (err) => {
-      this.$modal.msgError("上传文件失败，请重试");
+  ElMessage.error("上传文件失败，请重试");
-      this.$modal.closeLoading();
+  ElLoading.service().close();
-    },
+};
-    // 上传成功回调
+
-    handleUploadSuccess(res, file) {
+const handleUploadSuccess = (res, file) => {
   if (res.code === 200) {
-        this.uploadList.push({ name: res.fileName, url: res.fileName });
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
-        this.uploadedSuccessfully();
+    uploadedSuccessfully();
-      } else if (res.code == 401) {
+  } else if (res.code === 401) {
-        this.$store.dispatch("LogOut").then(() => {
+    userStore.logOut().then(() => {
-          // location.href = '/login';
+      ElMessage.error(res.msg);
-          this.$modal.msgError(res.msg);
+      ElLoading.service().close();
-          this.$modal.closeLoading();
+      uploadedSuccessfully();
-          this.uploadedSuccessfully();
+      router.replace("/login");
-          this.$router.replace("/login");
     });
   } else {
-        this.number--;
+    number.value--;
-        this.$modal.closeLoading();
+    ElLoading.service().close();
-        this.$modal.msgError(res.msg);
+    ElMessage.error(res.msg);
-        this.$refs.fileUpload.handleRemove(file);
+    fileUpload.value.handleRemove(file);
-        this.uploadedSuccessfully();
+    uploadedSuccessfully();
   }
-    },
+};
-    // 删除文件
+
-    handleDelete(index) {
+const handleDelete = (index) => {
-      this.fileList.splice(index, 1);
+  fileList.value.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
+  emit("update:modelValue", listToString(fileList.value));
-    },
+};
-    // 上传结束处理
+
-    uploadedSuccessfully() {
+const uploadedSuccessfully = () => {
-      if (this.number > 0 && this.uploadList.length === this.number) {
+  if (number.value > 0 && uploadList.value.length === number.value) {
-        this.fileList = this.fileList.concat(this.uploadList);
+    fileList.value = fileList.value.concat(uploadList.value);
-        this.uploadList = [];
+    uploadList.value = [];
-        this.number = 0;
+    number.value = 0;
-        this.$emit("input", this.listToString(this.fileList));
+    emit("update:modelValue", listToString(fileList.value));
-        this.$modal.closeLoading();
+    ElLoading.service().close();
   }
-    },
+};
-    // 获取文件名称
+
-    getFileName(name) {
+const getFileName = (name) => {
-      // 如果是url那么取最后的名字 如果不是直接返回
   if (name.lastIndexOf("/") > -1) {
     return name.slice(name.lastIndexOf("/") + 1);
-      } else {
-        return name;
   }
-    },
+  return name;
-    // 对象转成指定字符串分隔
+};
-    listToString(list, separator) {
+
+const listToString = (list, separator = ",") => {
   let strs = "";
-      separator = separator || ",";
   for (let i in list) {
     strs += list[i].url + separator;
   }
-      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+  return strs !== "" ? strs.substr(0, strs.length - 1) : "";
-    },
-  },
 };
 </script>
 
@@ -231,18 +227,21 @@ export default {
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
   margin-bottom: 10px;
   position: relative;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }