封装统一的全局自定义dialog拖拽指令

src/components/elDialog/dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog v-bind="$attrs" v-on="$listeners" @close="handleClose" :close-on-click-modal="false" class="centerDialog">
+    <el-dialog v-dialogDrag v-bind="$attrs" v-on="$listeners" @close="handleClose" :close-on-click-modal="false" class="centerDialog">
       <slot></slot>
       <slot name="footer" class="dialog-footer"></slot>
     </el-dialog>

src/main.js

@@ -1,16 +1,16 @@
-import Vue from 'vue'
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
-import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
-import './assets/icons' // icon
-import './permission' // permission control
+import Vue from "vue";
+import Element from "element-ui";
+import "./assets/styles/element-variables.scss";
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive
+import plugins from "./plugins"; // plugins
+import { download } from "@/utils/request";
+import "./assets/icons"; // icon
+import "./permission"; // permission control
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
@@ -22,72 +22,75 @@ import {
   selectDictLabel,
   selectDictLabels,
   handleTree,
-  formatTime, imageUrl
+  formatTime,
+  imageUrl,
 } from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 
 // 图片预览组件
-import ImageListPreview from "@/components/ImageListPreview"
+import ImageListPreview from "@/components/ImageListPreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
 // 下拉tree组件
 import TreeSelect from "@riophae/vue-treeselect";
 // elementui Dialog组件
-import DialogCom from '@/components/elDialog/dialog.vue'
+import DialogCom from "@/components/elDialog/dialog.vue";
 //布局容器
-import layoutCom from '@/components/layoutContainer/index.vue'
+import layoutCom from "@/components/layoutContainer/index.vue";
+//dialog拖拽指令
+import "@/utils/dialogdrag.js";
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
+Vue.prototype.getDicts = getDicts;
 //根据参数键名查询参数值
-Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey;
 //格式化时间
-Vue.prototype.parseTime = parseTime
+Vue.prototype.parseTime = parseTime;
 //格式化时间
-Vue.prototype.formatTime = formatTime
+Vue.prototype.formatTime = formatTime;
 //重置表单
-Vue.prototype.resetForm = resetForm
+Vue.prototype.resetForm = resetForm;
 //添加日期范围
-Vue.prototype.addDateRange = addDateRange
+Vue.prototype.addDateRange = addDateRange;
 //回显数据字典
-Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabel = selectDictLabel;
 // 回显数据字典（字符串、数组）
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
-Vue.prototype.imageUrl = imageUrl
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.download = download;
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.imageUrl = imageUrl;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
-Vue.component('ImageListPreview', ImageListPreview)
-Vue.component('TreeSelect', TreeSelect)
-Vue.component('DialogCom', DialogCom)
-Vue.component('layoutCom', layoutCom)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("Editor", Editor);
+Vue.component("FileUpload", FileUpload);
+Vue.component("ImageUpload", ImageUpload);
+Vue.component("ImagePreview", ImagePreview);
+Vue.component("ImageListPreview", ImageListPreview);
+Vue.component("TreeSelect", TreeSelect);
+Vue.component("DialogCom", DialogCom);
+Vue.component("layoutCom", layoutCom);
 
-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
-DictData.install()
+Vue.use(directive);
+Vue.use(plugins);
+Vue.use(VueMeta);
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -99,14 +102,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: sessionStorage.getItem('size') || 'medium' // set element-ui default size
-})
+  size: sessionStorage.getItem("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});

src/utils/dialogdrag.js

@@ -0,0 +1,52 @@
+import Vue from "vue";
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive("dialogDrag", {
+  bind(el, binding, vnode, oldVnode) {
+    const headerElement = el.querySelector(".el-dialog__header");
+    const dragDialog = el.querySelector(".el-dialog");
+    headerElement.style.cursor = "move";
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty =
+      dragDialog.currentStyle || window.getComputedStyle(dragDialog, null);
+
+    headerElement.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - headerElement.offsetLeft;
+      const disY = e.clientY - headerElement.offsetTop;
+      console.log(e.clientX, headerElement.offsetLeft);
+      // 获取到的值带px 正则匹配替换
+      let styL, styT;
+      console.log(sty.left);
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes("%")) {
+        styL =
+          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
+        styT =
+          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
+      } else {
+        styL = +sty.left.replace(/\px/g, ""); // 写成/px/g 也行
+        styT = +sty.top.replace(/\px/g, "");
+      }
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX;
+        const t = e.clientY - disY;
+
+        // 移动当前元素
+        dragDialog.style.left = `${l + styL}px`;
+        dragDialog.style.top = `${t + styT}px`;
+
+        // 将此时的位置传出去
+      };
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  },
+});

src/views/resumptionEvaluate/evaluatePlan/editPlanEvaluate.vue

@@ -65,7 +65,7 @@
           <div class="titleEvaluate">评价内容</div>
         </div>
 
-        <el-form label-width="130px">
+        <el-form >
           <el-row v-for="(item, index) in tableData" :key="item.id">
             <el-col :span="24">
               <el-form-item

src/views/resumptionEvaluate/evaluatePlan/index.vue

@@ -90,8 +90,8 @@
             <el-table-column label="外包评价名称" prop="evaluateName" />
             <el-table-column label="计划开始时间" prop="startTime" />
             <el-table-column label="计划结束时间" prop="endTime" />
-            <el-table-column label="评价人" prop="createBy" />
-            <el-table-column label="评价时间" prop="createTime" />
+            <el-table-column label="评价人" prop="evaluateBy" />
+            <el-table-column label="评价时间" prop="evaluateName" />
             <el-table-column
               label="状态"
               prop="status"
@@ -105,6 +105,7 @@
               class-name="small-padding fixed-width"
             >
               <template slot-scope="{ row }">
+               
                 <el-button
                   size="mini"
                   v-if="isEvaluateHandler(row)"
@@ -172,7 +173,7 @@ export default {
   created() {},
   mounted() {},
   computed: {
-    ...mapGetters(["orgId",'roles']),
+    ...mapGetters(["orgId",'roleList']),
   },
   methods: {
     statusChange(row) {
@@ -216,8 +217,8 @@ export default {
     isEvaluateHandler(row){
       let falg=false
       row.roleName?.split(',').forEach(item => {
-        this.roles.forEach(i=>{
-          if(i==item){
+        this.roleList.forEach(i=>{
+          if(i.roleName==item){
             falg=true
           }
         })