上传单个图片上传组件修改

src/components/ImageUploadSingle/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="component-upload-image">
+    <div class="upload" v-if="isVisible">
+      <el-upload
+        multiple
+        :action="uploadImgUrl"
+        list-type="picture-card"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        name="file"
+        :on-remove="handleRemove"
+        :show-file-list="true"
+        :headers="headers"
+        :file-list="fileList"
+        :on-preview="handlePictureCardPreview"
+        :class="{ hide: this.fileList.length >= this.limit }"
+      >
+        <i class="el-icon-plus"></i>
+      </el-upload>
+
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
+        的文件
+      </div>
+
+      <el-dialog
+        :visible.sync="dialogVisible"
+        title="预览"
+        width="800"
+        append-to-body
+      >
+        <img
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
+        />
+      </el-dialog>
+    </div>
+    <!-- 加载 -->
+    <div class="loadbox" v-else>
+      <h5>加载中</h5>
+      <i class="el-icon-loading"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 5,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      isVisible: true, // 控制盒子显示状态
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(",");
+          // 然后将数组转为对象数组
+          this.fileList = list.map((item) => {
+            if (typeof item === "string") {
+              if (item.indexOf(this.baseUrl) === -1) {
+                // item = { name: this.baseUrl + item, url: this.baseUrl + item };k
+                item = { name: item, url: item };
+              } else {
+                item = { name: item, url: item };
+              }
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map((f) => f.name).indexOf(file.name);
+      if (findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("onRemoved", this.listToString(this.fileList));
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      this.uploadList.push({ name: res.fileName, url: res.url });
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.isVisible = true;
+        // this.$emit("onUploaded", this.listToString(this.fileList));
+        this.$emit("onUploaded", this.fileList);
+        this.$modal.closeLoading();
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      this.isVisible = false;
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        isImg = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$modal.msgError(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传图片，请稍候...");
+      this.number++;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$modal.msgError("上传图片失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+.loadbox {
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #fff, $alpha: 0.9);
+  // position: absolute;
+  // left: 0;
+  // top: 0;
+  // z-index: 200;
+  // padding: 18% 45%;
+  // box-sizing: border-box;
+  h5 {
+    font-size: 15px;
+  }
+  .el-icon-loading {
+    font-size: 30px;
+    margin-left: 2%;
+  }
+}
+</style>
+

src/main.js

@@ -32,6 +32,8 @@ import Editor from "@/components/Editor"
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
+// 单个图片上传组件
+import ImageUploadSingle from "@/components/ImageUploadSingle"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
@@ -65,6 +67,7 @@ Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
+Vue.component('ImageUploadSingle', ImageUploadSingle)
 Vue.component('ImagePreview', ImagePreview)
 // 解决el-radio报错
 Vue.directive('removeAriaHidden', {

src/views/mes/md/locksettype/index.vue

@@ -25,21 +25,27 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery"
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-plus"
@@ -50,7 +56,8 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="info"
           plain
           icon="el-icon-sort"
@@ -124,7 +131,8 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -132,7 +140,8 @@
             v-hasPermi="['mes:md:waa:edit']"
             >修改
           </el-button>
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-plus"
@@ -141,7 +150,8 @@
             >新增
           </el-button>
 
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             v-if="scope.row.parentTypeId != 0"
             size="mini"
             type="text"
@@ -208,24 +218,24 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="锁具类型图标" prop="locksetTypeIcon">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.locksetTypeIcon"
                 :fileSize="5"
                 @onUploaded="handleIconUplaoded"
                 @onRemoved="handleIconRemoved"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="锁具类型图片" prop="locksetTypeImg">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.locksetTypeImg"
                 :fileSize="5"
                 @onUploaded="handleImgUplaoded"
                 @onRemoved="handleImgRemoved"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
         </el-row>
@@ -243,7 +253,9 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-no-more-click type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-no-more-click type="primary" @click="submitForm"
+          >确 定</el-button
+        >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
     </el-dialog>

src/views/mes/md/locktype/index.vue

@@ -25,21 +25,27 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery"
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-plus"
@@ -50,7 +56,8 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="info"
           plain
           icon="el-icon-sort"
@@ -116,7 +123,8 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -124,7 +132,8 @@
             v-hasPermi="['mes:md:waa:edit']"
             >修改
           </el-button>
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-plus"
@@ -133,7 +142,8 @@
             >新增
           </el-button>
 
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             v-if="scope.row.parentTypeId != 0"
             size="mini"
             type="text"
@@ -220,30 +230,32 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="挂锁类型图标" prop="lockTypeIcon">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.lockTypeIcon"
                 :fileSize="5"
                 @onUploaded="handleImgUplaoded"
                 @onRemoved="handleImgRemoved"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="挂锁类型图片" prop="lockTypeImg">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.lockTypeImg"
                 :fileSize="5"
                 @onUploaded="handleImgUplaoded1"
                 @onRemoved="handleImgRemoved1"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-no-more-click type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-no-more-click type="primary" @click="submitForm"
+          >确 定</el-button
+        >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
     </el-dialog>

src/views/mes/md/segregationpoint/index.vue

@@ -72,14 +72,19 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery"
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
@@ -87,7 +92,8 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-plus"
@@ -98,7 +104,8 @@
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="danger"
           plain
           icon="el-icon-delete"
@@ -143,7 +150,8 @@
       </el-table-column> -->
       <el-table-column label="隔离点编号" align="center" prop="pointCode">
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:md:seg:query']"
@@ -160,7 +168,12 @@
           />
         </template>
       </el-table-column> -->
-      <el-table-column label="隔离点图标" align="center" prop="pointIcon" width="90">
+      <el-table-column
+        label="隔离点图标"
+        align="center"
+        prop="pointIcon"
+        width="90"
+      >
         <template slot-scope="scope">
           <img
             v-if="scope.row.pointIcon"
@@ -171,7 +184,12 @@
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="隔离点图片" align="center" prop="pointPicture" width="90">
+      <el-table-column
+        label="隔离点图片"
+        align="center"
+        prop="pointPicture"
+        width="90"
+      >
         <template slot-scope="scope">
           <img
             v-if="scope.row.pointPicture"
@@ -191,7 +209,7 @@
         </template>
       </el-table-column>
 
-       <el-table-column label="锁具名称" align="center" prop="lockTypeName">
+      <el-table-column label="锁具名称" align="center" prop="lockTypeName">
       </el-table-column>
       <el-table-column label="锁具类型" align="center" prop="lockTypeId">
         <template slot-scope="scope">
@@ -199,18 +217,37 @@
             :options="dict.type.lock_type"
             :value="scope.row.lockTypeId"
           />
-
         </template>
       </el-table-column>
-      <el-table-column label="锁具图标" align="center" prop="lockTypeIcon" width="90">
+      <el-table-column
+        label="锁具图标"
+        align="center"
+        prop="lockTypeIcon"
+        width="90"
+      >
         <template slot-scope="scope">
-          <img :src="scope.row.lockTypeIcon" alt="" style="width: 50px; height: 50px" v-if="scope.row.lockTypeIcon"/>
+          <img
+            :src="scope.row.lockTypeIcon"
+            alt=""
+            style="width: 50px; height: 50px"
+            v-if="scope.row.lockTypeIcon"
+          />
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="锁具图片" align="center" prop="lockTypeImg" width="90">
+      <el-table-column
+        label="锁具图片"
+        align="center"
+        prop="lockTypeImg"
+        width="90"
+      >
         <template slot-scope="scope">
-          <img :src="scope.row.lockTypeImg" alt="" style="width: 50px; height: 50px" v-if="scope.row.lockTypeImg"/>
+          <img
+            :src="scope.row.lockTypeImg"
+            alt=""
+            style="width: 50px; height: 50px"
+            v-if="scope.row.lockTypeImg"
+          />
           <span v-else>-</span>
         </template>
       </el-table-column>
@@ -230,7 +267,8 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -238,7 +276,8 @@
             v-hasPermi="['mes:md:seg:edit']"
             >编辑
           </el-button>
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-delete"
@@ -360,72 +399,75 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="作业区域" prop="workareaId">
-<!--              <el-select-->
-<!--                style="width: 300px"-->
-<!--                v-model="form.workareaId"-->
-<!--                placeholder="请选择工作区域"-->
-<!--              >-->
-<!--                <el-option-->
-<!--                  v-for="dict in this.workareaList"-->
-<!--                  :key="dict.value"-->
-<!--                  :label="dict.label"-->
-<!--                  :value="dict.value"-->
-<!--                />-->
-<!--              </el-select>-->
-
-                <treeselect style="width: 300px" v-model="form.workareaId" :options="deptOptions" :normalizer="normalizer"
-                            placeholder="选择作业区域"
-                />
-              </el-form-item>
+              <!--              <el-select-->
+              <!--                style="width: 300px"-->
+              <!--                v-model="form.workareaId"-->
+              <!--                placeholder="请选择工作区域"-->
+              <!--              >-->
+              <!--                <el-option-->
+              <!--                  v-for="dict in this.workareaList"-->
+              <!--                  :key="dict.value"-->
+              <!--                  :label="dict.label"-->
+              <!--                  :value="dict.value"-->
+              <!--                />-->
+              <!--              </el-select>-->
 
+              <treeselect
+                style="width: 300px"
+                v-model="form.workareaId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+                placeholder="选择作业区域"
+              />
+            </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="8">
             <el-form-item label="隔离点图标" prop="pointIcon">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.pointIcon"
                 :fileSize="5"
                 @onUploaded="handleIconUplaoded"
                 @onRemoved="handleIconRemoved"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="隔离点图片" prop="pointPicture">
-              <ImageUpload
+              <ImageUploadSingle
                 :limit="1"
                 :value="form.pointPicture"
                 :fileSize="5"
                 @onUploaded="handleImgUplaoded"
                 @onRemoved="handleImgRemoved"
-              ></ImageUpload>
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
-
         </el-row>
 
-<!--        <el-form-item label="所属车间" prop="workshopId">-->
-<!--          <el-select-->
-<!--            style="width: 318px"-->
-<!--            v-model="form.workshopId"-->
-<!--            placeholder="请选择所属车间"-->
-<!--            @change="workShopChange"-->
-<!--          >-->
-<!--            <el-option-->
-<!--              v-for="item in this.workshopList"-->
-<!--              :key="item.key"-->
-<!--              :label="item.label"-->
-<!--              :value="item.value"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-
+        <!--        <el-form-item label="所属车间" prop="workshopId">-->
+        <!--          <el-select-->
+        <!--            style="width: 318px"-->
+        <!--            v-model="form.workshopId"-->
+        <!--            placeholder="请选择所属车间"-->
+        <!--            @change="workShopChange"-->
+        <!--          >-->
+        <!--            <el-option-->
+        <!--              v-for="item in this.workshopList"-->
+        <!--              :key="item.key"-->
+        <!--              :label="item.label"-->
+        <!--              :value="item.value"-->
+        <!--            />-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
       </el-form>
 
       <div slot="footer" class="dialog-footer">
-        <el-button v-no-more-click type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-no-more-click type="primary" @click="submitForm"
+          >确 定</el-button
+        >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -443,15 +485,14 @@ import {
   deleteIsIsolationPointByPointIds,
 } from "@/api/mes/spm/segregationPoint";
 import { genCode } from "@/api/system/autocode/rule";
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { listWorkarea } from '@/api/mes/wa/workarea'
-
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { listWorkarea } from "@/api/mes/wa/workarea";
 
 export default {
   name: "Team",
   components: { Treeselect },
-  dicts: ["power_type", "point_type",'lock_type'],
+  dicts: ["power_type", "point_type", "lock_type"],
   data() {
     return {
       //自动生成编码
@@ -544,9 +585,9 @@ export default {
         workareaId: [
           { required: true, message: "工作区域不能为空", trigger: "blur" },
         ],
-        pointType:[
+        pointType: [
           { required: true, message: "隔离点类型不能为空", trigger: "blur" },
-        ]
+        ],
       },
     };
   },
@@ -582,20 +623,25 @@ export default {
         this.loading = false;
       });
       // 获取工作区域数据
-      listWorkarea().then(response => {
-        this.deptOptions = this.handleTree(response.data.records, 'workareaId', 'parentId', 'children')
-      })
+      listWorkarea().then((response) => {
+        this.deptOptions = this.handleTree(
+          response.data.records,
+          "workareaId",
+          "parentId",
+          "children"
+        );
+      });
     },
     /** 转换部门数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.workareaId,
         label: node.workareaName,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
     //图片上传成功
     handleImgUplaoded(imgUrl) {
@@ -605,7 +651,7 @@ export default {
     handleIconUplaoded(imgUrl) {
       this.form.pointIcon = imgUrl[0].url;
     },
-    handleIconUplaoded1(imgUrl){
+    handleIconUplaoded1(imgUrl) {
       this.form.lockTypeImg = imgUrl[0].url;
     },
     //图标上传成功
@@ -621,8 +667,8 @@ export default {
     handleIconRemoved1(imgUrl) {
       this.form.lockTypeImg = null;
     },
-    handleIconRemoved2(imgUrl){
-      this.form.lockTypeIcon = ''
+    handleIconRemoved2(imgUrl) {
+      this.form.lockTypeIcon = "";
     },
     //图片移除
     handleImgRemoved(imgUrl) {
@@ -674,7 +720,7 @@ export default {
       this.title = "添加隔离点";
       this.optType = "add";
       this.pointId = null;
-      this.form.workshopId=0;
+      this.form.workshopId = 0;
       this.getworkShop();
     },
     // 查询明细按钮操作
@@ -705,7 +751,7 @@ export default {
         if (valid) {
           console.log(this.pointId, "this.pointId");
           if (this.pointId != null) {
-            console.log(this.form,'隔离点编辑form')
+            console.log(this.form, "隔离点编辑form");
             updateIsIsolationPoint(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;

src/views/mes/md/workarea/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="工作区域编码" prop="workareaCode">
         <el-input
           v-model="queryParams.workareaCode"
@@ -19,7 +25,11 @@
       </el-form-item>
 
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="工作区域状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="工作区域状态"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             :key="dict.value"
@@ -29,33 +39,51 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button v-no-more-click type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          v-no-more-click
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dept:add']"
-        >新增
+          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="info"
           plain
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
-        >展开/折叠
+          >展开/折叠
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table
@@ -64,50 +92,81 @@
       :data="deptList"
       row-key="workareaId"
       :default-expand-all="isExpandAll"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
-      <el-table-column prop="workareaCode" label="作业区域编码" width="260"></el-table-column>
-      <el-table-column prop="workareaName" label="作业区域名称" width="260"></el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+      <el-table-column
+        prop="workareaCode"
+        label="作业区域编码"
+        width="260"
+      ></el-table-column>
+      <el-table-column
+        prop="workareaName"
+        label="作业区域名称"
+        width="260"
+      ></el-table-column>
+      <el-table-column
+        prop="orderNum"
+        label="排序"
+        width="200"
+      ></el-table-column>
       <el-table-column prop="status" label="状态" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="作业区域地图" align="center" prop="create" width="200">
+      <el-table-column
+        label="作业区域地图"
+        align="center"
+        prop="create"
+        width="200"
+      >
         <template slot-scope="scope">
-          <el-button v-no-more-click size="mini" type="text" @click="look(scope.row)"
-          >预览
+          <el-button
+            v-no-more-click
+            size="mini"
+            type="text"
+            @click="look(scope.row)"
+            >预览
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['mes:md:waa:edit']"
-          >修改
+            >修改
           </el-button>
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['mes:md:waa:add']"
-          >新增
+            >新增
           </el-button>
 
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             v-if="scope.row.parentId != 0"
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['mes:md:waa:remove']"
-          >删除
+            >删除
           </el-button>
         </template>
       </el-table-column>
@@ -119,8 +178,12 @@
         <el-row>
           <el-col :span="18">
             <el-form-item label="上级作业区域" prop="parentId">
-              <treeselect style="width: 318px" v-model="form.parentId" :options="deptOptions" :normalizer="normalizer"
-                          placeholder="选择上级作业区域"
+              <treeselect
+                style="width: 318px"
+                v-model="form.parentId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+                placeholder="选择上级作业区域"
               />
             </el-form-item>
           </el-col>
@@ -139,7 +202,12 @@
         <el-row>
           <el-col :span="18">
             <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number style="width: 318px" v-model="form.orderNum" controls-position="right" :min="0"/>
+              <el-input-number
+                style="width: 318px"
+                v-model="form.orderNum"
+                controls-position="right"
+                :min="0"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -176,9 +244,13 @@
         <el-row>
           <el-col :span="18">
             <el-form-item label="区域地图" prop="mapImg">
-              <ImageUpload :limit="1" :value="form.mapImg" :fileSize="5" @onUploaded="handleImgUplaoded"
-                           @onRemoved="handleImgRemoved"
-              ></ImageUpload>
+              <ImageUploadSingle
+                :limit="1"
+                :value="form.mapImg"
+                :fileSize="5"
+                @onUploaded="handleImgUplaoded"
+                @onRemoved="handleImgRemoved"
+              ></ImageUploadSingle>
             </el-form-item>
           </el-col>
         </el-row>
@@ -207,7 +279,9 @@
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-no-more-click type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-no-more-click type="primary" @click="submitForm"
+          >确 定</el-button
+        >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -221,15 +295,15 @@ import {
   addWorkarea,
   updateWorkarea,
   delWorkarea,
-  listAllWorkshop
-} from '@/api/mes/wa/workarea'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { genCode } from '@/api/system/autocode/rule'
+  listAllWorkshop,
+} from "@/api/mes/wa/workarea";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { genCode } from "@/api/system/autocode/rule";
 
 export default {
-  name: 'Dept',
-  dicts: ['sys_normal_disable'],
+  name: "Dept",
+  dicts: ["sys_normal_disable"],
   components: { Treeselect },
   data() {
     return {
@@ -254,7 +328,7 @@ export default {
       // 部门树选项
       deptOptions: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 是否展开，默认全部展开
@@ -267,14 +341,14 @@ export default {
         size: -1,
         workareaCode: null,
         workareaName: null,
-        workareaType: null
+        workareaType: null,
       },
       // 总条数
       total: 0,
       // 表单参数
       form: {
-        workshopId:0,
-        parentId:0,
+        workshopId: 0,
+        parentId: 0,
       },
       WorkShopListOptions: null, //所属车间下拉数据
       EditId: null, //判断是否是编辑弹框的值
@@ -284,49 +358,49 @@ export default {
         //   { required: true, message: '父级不能为空', trigger: 'blur' }
         // ],
         orderNum: [
-          { required: true, message: '显示排序不能为空', trigger: 'blur' }
+          { required: true, message: "显示排序不能为空", trigger: "blur" },
         ],
         workareaCode: [
-          { required: true, message: '区域编号不能为空', trigger: 'blur' }
+          { required: true, message: "区域编号不能为空", trigger: "blur" },
         ],
         workareaName: [
-          { required: true, message: '区域名称不能为空', trigger: 'blur' }
+          { required: true, message: "区域名称不能为空", trigger: "blur" },
         ],
         workareaType: [
-          { required: true, message: '清选择区域类型', trigger: 'blur' }
-        ]
-      }
-    }
+          { required: true, message: "清选择区域类型", trigger: "blur" },
+        ],
+      },
+    };
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
     /** 查询部门列表 */
     getList() {
-      this.loading = true
-      listWorkarea(this.queryParams).then(response => {
+      this.loading = true;
+      listWorkarea(this.queryParams).then((response) => {
         debugger;
-        var depts = this.handleTree(response.data.records, 'workareaId')
-        this.deptList = depts
-        this.loading = false
-      })
+        var depts = this.handleTree(response.data.records, "workareaId");
+        this.deptList = depts;
+        this.loading = false;
+      });
     },
     /** 转换部门数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children
+        delete node.children;
       }
       return {
         id: node.workareaId,
         label: node.workareaName,
-        children: node.children
-      }
+        children: node.children,
+      };
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
@@ -339,15 +413,15 @@ export default {
         workareaId: null,
         workareaName: null,
         workareaType: null,
-        workshopId: null
-      }
-      this.autoGenFlag = false
-      this.resetForm('form')
+        workshopId: null,
+      };
+      this.autoGenFlag = false;
+      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.current = 1
-      this.getList()
+      this.queryParams.current = 1;
+      this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
@@ -356,99 +430,109 @@ export default {
         size: -1,
         workareaCode: null,
         workareaName: null,
-        workareaType: null
-      }
-      this.resetForm('queryForm')
-      this.handleQuery()
+        workareaType: null,
+      };
+      this.resetForm("queryForm");
+      this.handleQuery();
     },
     /** 新增按钮操作 */
     handleAdd(row) {
-      this.reset()
+      this.reset();
       if (row != undefined) {
-        this.form.workshopId=0
+        this.form.workshopId = 0;
         this.form.parentId = row.workareaId;
-      }else{
-        this.form.workshopId=0
+      } else {
+        this.form.workshopId = 0;
         this.form.parentId = 0;
       }
-      this.open = true
-      this.title = '添加工作区域'
-      listWorkarea().then(response => {
-        this.deptOptions = this.handleTree(response.data.records, 'workareaId', 'parentId', 'children')
-      })
+      this.open = true;
+      this.title = "添加工作区域";
+      listWorkarea().then((response) => {
+        this.deptOptions = this.handleTree(
+          response.data.records,
+          "workareaId",
+          "parentId",
+          "children"
+        );
+      });
     },
     /** 展开/折叠操作 */
     toggleExpandAll() {
-      this.refreshTable = false
-      this.isExpandAll = !this.isExpandAll
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
       this.$nextTick(() => {
-        this.refreshTable = true
-      })
+        this.refreshTable = true;
+      });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset()
-      this.EditId = row.workareaId || this.ids
-      getWorkareaInfo(row.workareaId).then(response => {
-
-
-        this.form = response.data
-        this.open = true
-        this.title = '修改工作区域'
-
-      })
-      listWorkarea().then(response => {
-        this.deptOptions = this.handleTree(response.data.records, 'workareaId', 'parentId', 'children')
-      })
+      this.reset();
+      this.EditId = row.workareaId || this.ids;
+      getWorkareaInfo(row.workareaId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改工作区域";
+      });
+      listWorkarea().then((response) => {
+        this.deptOptions = this.handleTree(
+          response.data.records,
+          "workareaId",
+          "parentId",
+          "children"
+        );
+      });
     },
     //图片上传成功
     handleImgUplaoded(imgUrl) {
-      console.log(imgUrl,'编辑拿到的图片')
-      this.form.mapImg = imgUrl[0].url
+      console.log(imgUrl, "编辑拿到的图片");
+      this.form.mapImg = imgUrl[0].url;
     },
     //图片移除
     handleImgRemoved(imgUrl) {
-      this.form.mapImg = null
+      this.form.mapImg = null;
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs['form'].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.workareaId != undefined) {
-            updateWorkarea(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
+            updateWorkarea(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
-            console.log(this.form,'新增工作区域参数')
-            addWorkarea(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.getList()
-            })
+            console.log(this.form, "新增工作区域参数");
+            addWorkarea(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
           }
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.workareaCode + '"的数据项？').then(function() {
-        return delWorkarea(row.workareaId)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess('删除成功')
-      }).catch(() => {
-      })
+      this.$modal
+        .confirm('是否确认删除名称为"' + row.workareaCode + '"的数据项？')
+        .then(function () {
+          return delWorkarea(row.workareaId);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
-        genCode('WORKAREA_CODE').then((response) => {
-          this.form.workareaCode = response
-        })
+        genCode("WORKAREA_CODE").then((response) => {
+          this.form.workareaCode = response;
+        });
       } else {
-        this.form.workareaCode = null
+        this.form.workareaCode = null;
       }
     },
     // 地图预览
@@ -458,8 +542,6 @@ export default {
       this.$router.push(`/mes/md/workarea/index/MapData?workareaId=${data}`);
       // this.dialogVisibleMap = true; // 显示地图预览弹框
     },
-
-  }
-
-}
+  },
+};
 </script>

src/views/mes/md/workshop/index.vue

@@ -38,14 +38,19 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
           >搜索</el-button
         >
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery"
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
           >重置</el-button
         >
       </el-form-item>
@@ -53,7 +58,8 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-plus"
@@ -64,7 +70,8 @@
         >
       </el-col>
       <el-col :span="1.5">
-        <el-button v-no-more-click
+        <el-button
+          v-no-more-click
           type="primary"
           plain
           icon="el-icon-refresh-left"
@@ -110,7 +117,8 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="车间编码" align="center" prop="workshopCode">
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:md:workshop:query']"
@@ -157,7 +165,8 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -165,7 +174,8 @@
             v-hasPermi="['mes:md:workshop:edit']"
             >修改</el-button
           >
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             type="text"
             plain
             icon="el-icon-plus"
@@ -174,7 +184,8 @@
             v-hasPermi="['mes:cal:team:add']"
             >新增
           </el-button>
-          <el-button v-no-more-click
+          <el-button
+            v-no-more-click
             size="mini"
             type="text"
             icon="el-icon-delete"
@@ -228,13 +239,13 @@
         <!--          <el-radio v-model="radio" label="2">停用</el-radio>-->
         <!--        </el-form-item>-->
         <el-form-item label="车间地图" prop="attr1">
-          <ImageUpload
+          <ImageUploadSingle
             :limit="1"
             :value="form.attr1"
             :fileSize="5"
             @onUploaded="handleImgUplaoded"
             @onRemoved="handleImgRemoved"
-          ></ImageUpload>
+          ></ImageUploadSingle>
         </el-form-item>
 
         <el-form-item label="面积" prop="area">
@@ -283,10 +294,16 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button v-no-more-click type="primary" @click="cancel" v-if="optType == 'view'"
+        <el-button
+          v-no-more-click
+          type="primary"
+          @click="cancel"
+          v-if="optType == 'view'"
           >返回</el-button
         >
-        <el-button v-no-more-click type="primary" @click="submitForm" v-else>确 定</el-button>
+        <el-button v-no-more-click type="primary" @click="submitForm" v-else
+          >确 定</el-button
+        >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
     </el-dialog>