Appearance
ehr
{
title: '保护状态',
dataIndex: 'is_sea',
enumSchemas: SeaStatus,
referenceKey: 'good'
width: 80,
},
update: (id, values) =>updateLead(id, values)
if ((isFunction(editable) && editable()) || editable) {
rowActions.unshift({
label: '编辑',
click: actions.handleEdit
})
}
改
if ((isFunction(editable)) || editable) {
const actionConfig = {
label: '删除',
confirm: '确定删除吗?',
click: actions.handleDel,
} as IGridTable.RowAction
if (isFunction(editable)) {
actionConfig.isShow = record => editable(record)
}
rowActions.push(actionConfig)
}erp
{
title: '保护状态',
dataIndex: 'is_sea',
enumable: SeaStatus,
referencable: 'good',
width: 80,
},
update: (id, values, record) => (record.status == 0 ? updateLead(id, values) : update(id, values)),
ehr
tableActions
isShow: Fn ,不支持boolean
needSelection: true,
click: (record, reload) => {
改
click: (ids, rows) => {
component: 'Picker',
改
comoment: 'select'
<template>
<div class="resizable" :style="containerStyleComputed" ref="root">
<slot />
<!-- 拖拽点(可按需注释掉某些方向) -->
<!-- <div class="handle handle-right" data-dir="right"></div> -->
<!-- <div class="handle handle-left" data-dir="left"></div> -->
<!-- <div class="handle handle-bottom" data-dir="bottom"></div> -->
<!-- <div class="handle handle-top" data-dir="top"></div> -->
<div class="handle handle-br" data-dir="br"></div>
<!-- <div class="handle handle-bl" data-dir="bl"></div>
<div class="handle handle-tr" data-dir="tr"></div>
<div class="handle handle-tl" data-dir="tl"></div> -->
</div>
</template>
<script setup>
import { ref, computed, onBeforeUnmount } from "vue";
const props = defineProps({
width: { type: Number, default: 300 },
height: { type: Number, default: 180 },
minW: { type: Number, default: 50 },
minH: { type: Number, default: 15 },
maxW: { type: Number, default: 2000 },
maxH: { type: Number, default: 2000 },
tempScaleCupt: { type: Number, default: 1 },
});
const emit = defineEmits(["update:width", "update:height", "resize"]);
const root = ref(null);
const w = ref(props.width);
const h = ref(props.height);
let startX = 0,
startY = 0,
startW = 0,
startH = 0,
dir = "",
dragging = false;
const containerStyleComputed = computed(() => ({
// width: w.value + "px",
// height: h.value + "px"
}));
function startDrag(e) {
const t = e.target;
dir = t.dataset.dir;
if (!dir) return;
dragging = true;
const p = e.touches ? e.touches[0] : e;
startX = p.clientX;
startY = p.clientY;
startW = w.value;
startH = h.value;
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", stopDrag);
document.addEventListener("touchmove", onMove, { passive: false });
document.addEventListener("touchend", stopDrag);
}
function onMove(e) {
if (!dragging) return;
e.preventDefault();
const p = e.touches ? e.touches[0] : e;
let dx = p.clientX - startX;
let dy = p.clientY - startY;
let newW = startW;
let newH = startH;
console.log(dir,dx,dy,'move')
// 横向
if (dir.includes("right")) newW = startW + dx;
// if (dir.includes("left")) newW = startW - dx;
// 纵向
if (dir.includes("bottom")) newH = startH + dy;
// if (dir.includes("top")) newH = startH - dy;
if (dir.includes("br")) {
newW = startW + dx;
newH = startH + dy;
}
// 限制范围
newW = Math.max(props.minW, Math.min(props.maxW, newW));
newH = Math.max(props.minH, Math.min(props.maxH, newH));
console.log(newW,newH,'kkkk')
// 更新
w.value = newW;
h.value = newH;
emit("update:width", newW);
emit("update:height", newH);
emit("resize", { width: newW, height: newH });
}
function stopDrag() {
dragging = false;
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", stopDrag);
document.removeEventListener("touchmove", onMove);
document.removeEventListener("touchend", stopDrag);
}
// 注册拖拽事件
onMounted(() => {
root.value.querySelectorAll(".handle").forEach((el) => {
el.addEventListener("mousedown", (e) => {
e.stopPropagation(); // 阻止冒泡到父级
startDrag(e);
});
el.addEventListener("touchstart", (e) => {
e.stopPropagation(); // 阻止冒泡
startDrag(e);
}, { passive: false });
});
});
onBeforeUnmount(() => stopDrag());
</script>
<style scoped>
.resizable {
position: relative;
user-select: none;
/* background-color: #fff; */
width: 100%;
height: 100%;
}
/* 公用拖拽点样式 */
.handle {
position: absolute;
background: transparent;
}
/* 边 */
.handle-right {
right: 0;
top: 0;
width: 6px;
height: 100%;
cursor: ew-resize;
}
.handle-left {
left: 0;
top: 0;
width: 6px;
height: 100%;
cursor: ew-resize;
}
.handle-bottom {
bottom: 0;
left: 0;
width: 100%;
height: 6px;
cursor: ns-resize;
}
.handle-top {
top: 0;
left: 0;
width: 100%;
height: 6px;
cursor: ns-resize;
}
/* 角 */
.handle-br {
right: 0;
bottom: 0;
width: 12px;
height: 12px;
cursor: nwse-resize;
}
.handle-bl {
left: 0;
bottom: 0;
width: 12px;
height: 12px;
cursor: nesw-resize;
}
.handle-tr {
right: 0;
top: 0;
width: 12px;
height: 12px;
cursor: nesw-resize;
}
.handle-tl {
left: 0;
top: 0;
width: 12px;
height: 12px;
cursor: nwse-resize;
}
</style>