图纸列表接口

src/api/gas/cad.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询cad图纸列表
+export function listCad(query) {
+  return request({
+    url: '/gas/cad/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询cad图纸详细
+export function getCad(id) {
+  return request({
+    url: '/gas/cad/' + id,
+    method: 'get'
+  })
+}
+
+// 新增cad图纸
+export function addCad(data) {
+  return request({
+    url: '/gas/cad',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改cad图纸
+export function updateCad(data) {
+  return request({
+    url: '/gas/cad',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除cad图纸
+export function delCad(id) {
+  return request({
+    url: '/gas/cad/' + id,
+    method: 'delete'
+  })
+}

src/components/ImageUpload/cad.vue

@@ -0,0 +1,237 @@
+<template>
+  <el-form>
+    <el-upload ref="fileList"
+      :disabled="disabled"
+      :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 abs"></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-image-viewer
+      v-if="dialogVisible2"
+      :z-index="9999"
+      :on-close="closeImgViewer"
+      :url-list="fileList.map(t => t.url)"
+      :initial-index="imgIndex"
+      fit="cover"
+    />
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="浏览视频"
+      width="70%"
+      append-to-body
+    >
+      <video
+        v-if="dialogVisible"
+        :src="dialogImageUrl"
+        autoplay
+        style="display: block; max-width: 100%; max-height: 80vh; margin: 0 auto" controls="controls"/>
+    </el-dialog>
+  </el-form>
+</template>
+
+<script>
+  import { getToken } from "@/utils/auth";
+  import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+  export default {
+    components:{ElImageViewer},
+    props: {
+      value: [String, Object, Array],
+      // 图片数量限制
+      limit: {
+        type: Number,
+        default: 5,
+      },
+      // 大小限制(MB)
+      fileSize: {
+        type: Number,
+        default: 500,
+      },
+      disabled:{
+        type:Boolean,
+        default: false
+      },
+      // 文件类型, 例如['png', 'jpg', 'jpeg']
+      fileType: {
+        type: Array,
+        default: () => ["png", "jpg", "jpeg","mp4","dwg","dwt"],
+      },
+      // 是否显示提示
+      isShowTip: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        dialogImageUrl: "",
+        dialogVisible: false,
+        dialogVisible2: false,
+        hideUpload: false,
+        imgIndex: 0, //当前选择的哪张图片
+        type:"",
+        baseUrl: process.env.VUE_APP_BASE_API,
+        uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        fileList: []
+      };
+    },
+    watch: {
+      value: {
+        handler(val) {
+          if (val) {
+            // 首先将值转为数组
+            const list = Array.isArray(val) ? val : this.value.split(',');
+            // 然后将数组转为对象数组
+            this.fileList = list.map(item => {
+              if (typeof item === "string") {
+                item = { name: item, url: item ,suffix:item.substring(item.lastIndexOf('.')+1)};
+              }
+              return item;
+            });
+          } else {
+            this.fileList = [];
+            return [];
+          }
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+    computed: {
+      // 是否显示提示
+      showTip() {
+        return this.isShowTip && (this.fileType || this.fileSize);
+      },
+    },
+    methods: {
+      /**
+       * @description 关闭图片查看器
+       */
+      closeImgViewer() {
+        this.imgIndex = 0
+        this.dialogVisible2 = false;
+      },
+      // 删除图片
+      handleRemove(file, fileList) {
+        const findex = this.fileList.map(f => f.name).indexOf(file.name);
+        if(findex > -1) {
+          this.fileList.splice(findex, 1);
+          this.$emit("input", this.fileList);
+        }
+      },
+      // 上传成功回调
+      handleUploadSuccess(res) {
+        if (res.code == 200) {
+          this.fileList.push({ fileName: res.data.name, fileUrl: res.data.url ,fileSuffix:res.data.suffix,url: res.data.url});
+          this.$emit("input", this.fileList);
+          this.loading.close();
+        } else {
+          this.$message.error(res.msg);
+          this.loading.close();
+        }
+      },
+      // 上传前loading加载
+      handleBeforeUpload(file) {
+        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.$message.error(
+            `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+          );
+          return false;
+        }
+        if (this.fileSize) {
+          const isLt = file.size / 1024 / 1024 < this.fileSize;
+          if (!isLt) {
+            this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+            return false;
+          }
+        }
+        this.loading = this.$loading({
+          lock: true,
+          text: "上传中",
+          background: "rgba(0, 0, 0, 0.7)",
+        });
+      },
+      // 文件个数超出
+      handleExceed() {
+        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+      },
+      // 上传失败
+      handleUploadError(res) {
+        this.$message({
+          type: "error",
+          message: "上传失败",
+        });
+        this.loading.close();
+      },
+      // 预览
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.type=file.name.slice(file.name.lastIndexOf(".")+1);
+        if (this.type === 'mp4')
+        this.dialogVisible = true;
+        else{
+          this.imgIndex = this.fileList.findIndex((item) => item.name == file.url)
+          console.log(this.imgIndex)
+          this.dialogVisible2 = true
+        }
+        console.log(this.type)
+      },
+    }
+  };
+</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);
+  }
+</style>
+

src/views/gas/cad/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="队伍" prop="postId">
+        <el-select v-model="queryParams.postId" clearable placeholder="请选择队伍" :disabled="postName.indexOf('xx') > -1">
+          <el-option
+            v-for="item in postOptions"
+            :key="item.postId"
+            :label="item.postName"
+            :value="item.postId"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button 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
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:cad:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:cad:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:cad:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['system:cad:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="cadList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" v-if="true"/>
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="队伍id" align="center" prop="postId" >
+        <template slot-scope="scope">
+          <dict-post :options="postOptions" :value="scope.row.ranks"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:cad:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:cad:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改cad图纸对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="队伍" prop="postId">
+          <el-select v-model="form.postId" clearable placeholder="请选择队伍">
+            <el-option
+              v-for="item in postOptions"
+              :key="item.postId"
+              :label="item.postName"
+              :value="item.postId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="照片" prop="fileList">
+          <cadUpload v-model="form.fileList" :disabled="false"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCad, getCad, delCad, addCad, updateCad } from "@/api/gas/cad";
+import {listPostAll} from "@/api/system/post";
+import cadUpload from "@/components/ImageUpload/cad.vue";
+import Cookies from "js-cookie";
+
+export default {
+  components:{cadUpload},
+  name: "Cad",
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // cad图纸表格数据
+      cadList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: undefined,
+        postId: (Cookies.get("postName").indexOf('xx') > -1 ? parseInt(Cookies.get("postId")) : undefined),
+      },
+      postName:Cookies.get("postName"),
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        id: [
+          { required: true, message: "主键不能为空", trigger: "blur" }
+        ],
+        name: [
+          { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+        postId: [
+          { required: true, message: "队伍id不能为空", trigger: "change" }
+        ],
+      },
+
+      // 岗位选项
+      postOptions: [],
+    };
+  },
+  created() {
+    this.getPostList();
+    this.getList();
+  },
+  methods: {
+    //获取岗位列
+    getPostList(){
+      listPostAll({remark:'ranks'}).then(response => {
+        this.postOptions = response.data;
+      });
+    },
+    /** 查询cad图纸列表 */
+    getList() {
+      this.loading = true;
+      listCad(this.queryParams).then(response => {
+        this.cadList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        name: undefined,
+        postId: undefined,
+        fileList:[],
+        delFlag: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加cad图纸";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const id = row.id || this.ids
+      getCad(id).then(response => {
+        this.loading = false;
+        debugger
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改cad图纸";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      console.log(this.from);
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.id != null) {
+            updateCad(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addCad(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除cad图纸编号为"' + ids + '"的数据项？').then(() => {
+        this.loading = true;
+        return delCad(ids);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+        this.$download.excel('/system/cad/export', this.queryParams);
+    }
+  }
+};
+</script>