20240923

src/main.js

@@ -26,6 +26,8 @@ import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 
 import selectDiv from '@/views/common/selectDiv.vue'
+
+import resizable from '@/utils/resizable.js'
 Vue.prototype.isAuth = isAuth     // 权限方法
 Vue.component('downloadExcel', JsonExcel)
 // Vue.component('pdf', pdf)
@@ -36,6 +38,7 @@ export const EventBus = new Vue();
 
 Vue.use(Viewer)
 
+Vue.directive('resizable',resizable)
 // 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
 if (process.env.NODE_ENV !== 'production') {
   require('@/mock')

src/utils/resizable.js

@@ -0,0 +1,43 @@
+// v-resizable.js
+export default {
+  bind(el) {
+    const minWidth = 400; // 设置表格最小宽度
+    const minHeight = 200; // 设置表格最小高度
+    let startX, startY, startWidth, startHeight;
+
+    // 创建用于拖拽的右下角拖动柄
+    const resizeHandle = document.createElement('div');
+    resizeHandle.style.width = '10px';
+    resizeHandle.style.height = '10px';
+    // resizeHandle.style.background = 'rgba(0, 0, 0, 0.5)';
+    resizeHandle.style.position = 'absolute';
+    resizeHandle.style.right = '0';
+    resizeHandle.style.bottom = '0';
+    resizeHandle.style.cursor = 'se-resize';
+    el.appendChild(resizeHandle);
+
+    // 处理鼠标按下事件
+    resizeHandle.addEventListener('mousedown', function (e) {
+      startX = e.clientX;
+      startY = e.clientY;
+      startWidth = parseInt(document.defaultView.getComputedStyle(el).width, 10);
+      startHeight = parseInt(document.defaultView.getComputedStyle(el).height, 10);
+      document.documentElement.addEventListener('mousemove', onMouseMove, false);
+      document.documentElement.addEventListener('mouseup', onMouseUp, false);
+    });
+
+    // 处理鼠标移动事件
+    function onMouseMove(e) {
+      const width = startWidth + e.clientX - startX;
+      const height = startHeight + e.clientY - startY;
+      el.style.width = Math.max(minWidth, width) + 'px';
+      el.style.height = Math.max(minHeight, height) + 'px';
+    }
+
+    // 处理鼠标松开事件
+    function onMouseUp() {
+      document.documentElement.removeEventListener('mousemove', onMouseMove, false);
+      document.documentElement.removeEventListener('mouseup', onMouseUp, false);
+    }
+  }
+};

src/views/modules/property/available.vue

@@ -366,7 +366,7 @@ export default {
       }else {
         this.saveForm = {...this.templateItem}
         this.saveForm.valueChooseFlag = 'N';
-        this.saveForm.valueType = 'text';
+        this.saveForm.valueType = '文本';
         if (this.queryForm.itemType){
           this.saveForm.itemType = this.queryForm.itemType;
         }
@@ -578,6 +578,13 @@ export default {
     },
     'templateItem.itemNo'(newVal, oldVal){
       this.templateItem.itemNo = newVal.toUpperCase();
+    },
+    'saveForm.valueType'(newVal, oldVal){
+      if (newVal === '文本'){
+        this.saveForm.valueTypeDb = 'T'
+      }else {
+        this.saveForm.valueTypeDb = 'N'
+      }
     }
   }
 }
@@ -628,7 +635,7 @@ export default {
         :label="item.columnLabel">
         <template slot-scope="scope">
           <span v-if="!item.columnHidden">
-            <template v-if="item.columnProp==='valueType'">{{ scope.row[item.columnProp] === 'text' ? '文本' : '数字' }}</template>
+            <template v-if="item.columnProp==='valueType'">{{ scope.row[item.columnProp]}}</template>
             <template v-else-if="item.columnProp==='valueChooseFlag'">{{ scope.row[item.columnProp] === 'Y' ? '是' : '否' }}</template>
             <template v-else>{{ scope.row[item.columnProp] }}</template>
           </span>
@@ -680,8 +687,8 @@ export default {
           <el-col :span="10">
             <el-form-item label="值类型" prop="valueType" :show-message="false">
               <el-select v-model="saveForm.valueType" style="width: 100%;" @change="changeValueType">
-                <el-option label="文本" value="text"></el-option>
-                <el-option label="数字" value="num"></el-option>
+                <el-option label="文本" value="文本"></el-option>
+                <el-option label="数字" value="数字"></el-option>
               </el-select>
             </el-form-item>
           </el-col>