<!-- 工艺模板 -->
<template>
<el-container v-loading="loading">
<!-- 工具栏 -->
<el-header>
<!-- 左侧工具栏 -->
<!-- <div
class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="edit()">新增</el-button>
</div> -->
<!-- 右侧工具栏 -->
<div
class="right-panel">
<div
class="right-panel-search">
<el-input v-model="procedureData.name" placeholder="名称" clearable />
<el-button icon="el-icon-refresh" @click="refreshProcedure">查看所有</el-button>
<el-button type="primary" icon="el-icon-search" @click="getProcedure(0)">搜索</el-button>
<el-button type="primary" icon="el-icon-plus" @click="editProcedure()">新增</el-button>
</div>
</div>
</el-header>
<!-- 列表 -->
<el-main
class="nopadding">
<scTable :data="procedureData.data" style="width: 100%" row-key="id" :getList="getProcedure" hidePagination
:header-cell-style="{ background: '#F1F3F0', color: '#7B7571' }">
<el-table-column label="ID" prop="id" width="50"></el-table-column>
<el-table-column label="编号" prop="rule_number"></el-table-column>
<el-table-column label="工艺名称" prop="name"></el-table-column>
<el-table-column label="操作人" prop="user_name"></el-table-column>
<el-table-column label="创建时间" prop="create_time"></el-table-column>
<el-table-column label="操作" fixed="right" width="150">
<template #default="scope">
<el-button plain type="primary" size="small" @click="editProcedure(scope.row)">编辑</el-button>
<el-button plain type="primary" size="small" @click="delProcedure(scope.row)">删除</el-button>
</template>
</el-table-column>
<template #pagination>
<el-pagination layout="prev, pager, next, total, sizes" :current-page="procedureData.current_page"
:page-size="procedureData.per_page" :total="procedureData.total" :page-sizes="[20, 50, 100]" @size-change="
(num) => {
procedureData.per_page = num;
getProcedure(1);
}
" @current-change="getProcedure" />
</template>
</scTable>
</el-main>
<!-- 工艺工序新增编辑模板 -->
<el-dialog v-model="ditVisibleGy" :close-on-click-modal="false" width="80%" :fullscreen="isFullscreen"
class="dialogGxgy">
<!-- 自定义标题栏 -->
<template #title>
<div
class="dialogtitle">
<h4 style="font-size: 17px;">{{ procedure
Form.id ? '编辑工艺模板' : '新增工艺模板' }}</h4>
<div
class="dialog-icons">
<!-- 全屏图标 -->
<el-icon @click="toggleFullscreen"
class="fullscreen-icon">
<component :is="isFullscreen ? ZoomOut : FullScreen" />
</el-icon>
</div>
</div>
</template>
<el-header>
<div
class="gybs">
<div
class="gyheader">
<h4>模板名称：</h4>
<el-input v-model="procedure
Form.name" placeholder="请输入模板名称" style="width: 200px" />
</div>
<!-- <el-upload
class="sc-file-select__upload" :action="action" multiple :show-file-list="false" :accept="accept"
:be
fore-upload="uploadBe
fore" :on-success="uploadSuccess" :on-error="uploadError" :headers="uploadHeaders"
:data="uploadData">
<el-button type="primary" icon="el-icon-upload">上传图纸</el-button>
</el-upload> -->
<!-- 图片列表，横向滚动 -->
</div>
</el-header>
<el-container v-loading="gymbLoading">
<el-aside width="250px" height="400px">
<el-card
class="card_gy">
<!-- 拖拽排序 -->
<div
class="tzpx">
<fcDraggable v-model="itemsgy" :sort="true" handle=".icon-drag" itemKey="gongxumingcheng"
direction="vertical" :animation="300" @end="onDragEnd">
<template #item="{ element, index }">
<div
class="slx">
<div
class="sortable-item" @click="selectItem(element)"
:
class="{ 'selected': selectedItem === element }">
<div
class="item_left">
<i
class="fc-icon icon-drag"></i>
</div>
<div
class="item_content"> {{ element.gongxumingcheng }}
</div>
<div
class="item_right">
<i
class="fc-icon icon-delete" @click.stop="removeField(index)"></i>
</div>
</div>
</div>
</template>
</fcDraggable>
<el-empty description="暂无工序" :image-size="120" v-if="itemsgy.length === 0" />
</div>
<el-button-group
class="btgp">
<el-button type="primary" @click="addProcedure">添加</el-button>
<el-button type="primary" @click="changeGx">选择工序</el-button>
</el-button-group>
</el-card>
</el-aside>
<el-container
class="" v-loading="bomLoading" v-if="itemsgy.length > 0">
<el-header>
<H3
class="ht">工序参数</H3>
</el-header>
<div
class="
formbody">
<div
class="gy
form" v-if="is
FormFilled">
<
form-create v-model:api="api" :rule="
formRule" :option="
formCreateOptions" />
</div>
<el-empty description="请先选择工序" v-show="!is
FormFilled" />
<div
class="gycs" v-if="itemsgy.length > 1">
<div
class="dowt">
<H3>工艺路线图</H3>
</div>
<div
class="route">
<el-steps :active="itemsgy.length" :space="150" align-center finish-status="primary"
process-status="primary">
<el-step v-
for="(item, index) in itemsgy" :key="index" :title="item.gongxumingcheng" />
</el-steps>
</div>
</div>
</div>
</el-container>
<div v-else style="width: 100%;">
<el-empty description="请先选择工序模板" />
</div>
<el-aside width="200px"
class="lf_aside">
<div
class="image-preview-list">
<el-scrollbar height="400px">
<el-upload
class="uploadTz" :action="action" multiple :show-file-list="false"
:on-preview="handlePictureCardPreview" :be
fore-upload="uploadBe
fore" :on-success="uploadSuccess"
:on-error="uploadError" :headers="uploadHeaders" :data="uploadData" >
<el-button type="primary">上传图纸</el-button>
</el-upload>
<div
class="upbox">
<div
class="wdg" v-
for="(item, index) in fileList" :key="index">
<div
class="wg_lf" @click="handlePictureCardPreview(item)">
<el-icon size="18">
<DocumentRemove />
</el-icon>
<el-tooltip
class="box-item" effect="dark" :content="item.original_name" placement="top">
<div
class="weds">{{ item.original_name }}</div>
</el-tooltip>
</div>
<div>
<el-button type="danger" :icon="Delete" circle size="small" @click="delImg(index)"/>
</div>
</div>
</div>
<el-dialog v-model="dialogVisibleImg">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-scrollbar>
</div>
</el-aside>
</el-container>
<template #footer>
<span
class="dialog-footer">
<el-button @click="ditVisibleGy = false">关闭</el-button>
<el-button type="primary" @click="submitProcesses" :loading="gyloading">
保存工艺模板
</el-button>
</span>
</template>
</el-dialog>
<!-- 选择工序弹窗 -->
<el-dialog v-model="dialogVisiblexzgx" title="选择工序" width="60%">
<el-container>
<el-aside width="200px">
<el-tree ref="dic"
class="menu" node-key="id" :data="gxtypeList" :props="{
label: 'name',
}" :highlight-current="true" :expand-on-click-node="false" :filter-node-
method="dicFilterNode"
@node-click="selectgx
Class">
<template #default="{ node, data }">
<span
class="custom-tree-node">
<span
class="label">{{ node.label }}</span>
<span
class="code">{{ data.code }}</span>
</span>
</template>
</el-tree>
</el-aside>
<el-main v-loading="tableloading">
<el-header v-if="processesList.data.length > 0">
<div
class="right-panel">
<el-input v-model="processesList.name" placeholder="标题"
class="titlese" />
<el-button icon="el-icon-refresh" @click="refresprocessesList">查看所有</el-button>
<el-button type="primary" icon="el-icon-search" @click="getTemplate(1)"></el-button>
</div>
</el-header>
<el-main>
<scTable :data="processesList.data" ref="tableRef" style="width: 100%" row-key="id" :getList="getitem"
@row-click="handleRowClick" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="id" label="ID" width="50" />
<el-table-column prop="gongxumingcheng" label="工序名称" fixed="right" />
<el-table-column prop="user_name" label="创建人" fixed="right" />
<el-table-column prop="create_time" label="创建时间" fixed="right" />
<template #pagination>
<el-pagination layout="prev, pager, next, total, sizes" :current-page="processesList.current_page"
:page-size="processesList.per_page" :total="processesList.total" :page-sizes="[20, 50, 100]"
@size-change="
(num) => {
processesList.per_page = num;
getTemplate(1);
}
" @current-change="getTemplate" />
</template>
</scTable>
</el-main>
</el-main>
</el-container>
<template #footer>
<div
class="dialog-footer">
<el-button @click="dialogVisiblexzgx = false">取消</el-button>
<el-button type="primary" @click="selectProcess" :loading="selectProcessLoading">
确定
</el-button>
</div>
</template>
</el-dialog>
<!-- 新增工序 公共页面弹窗新增 -->
<el-dialog v-model="ditVisibleProcedure" :close-on-click-modal="false" width="70%" title="工序新增">
<
form-create v-model:api="api" :rule="
formRuleAdd" :option="
formCreateOptions" />
</el-dialog>
</el-container>
</template>
<script setup>
import { ref, watch, reactive, nextTick } from "vue";
import request from "@/utils/httpRequest";
import { ElMessage,ElMessageBox } from "element-plus";
import fcDraggable from "vuedraggable";
import
formCreate from "@
form-create/element-ui";
import { get
FormRuleDescription } from "@/components/
formCreate/src/utils/index";
// js工具
import utils from "./components/utils";
import tool from "@/utils/tool";
import config from "@/config"
import { DocumentRemove, Delete } from "@element-plus/icons-vue";
// 页面loading
let loading = ref(false);
//上传地址
const token = tool.cookie.get("TOKEN");
const action = ref(config.BASEURL + "/system/upload/upload");
const fileList = ref([]); //上传文件列表
const dialogVisibleImg = ref(false)
const dialogImageUrl = ref('')
//设置请求头
const uploadHeaders = ref({
token: token, // 添加 token 到 headers
});
// 设置额外字段
const uploadData = ref({
is_annex: 1, // 添加额外字段 is_annex
group_id: 0,
});
// 列表数据
const procedureData = ref({
current_page: 1,
per_page: 10,
total: 0,
data: [],
name: '',//名称查询
})
// #region 定义工艺模板数据字段
const itemsgy = ref([])//工序列表
const
formRule = ref([])//
formcreate 组件
const selectedItem = ref({})// 记录当前选中工序的索引
const processLoading = ref(false)//loading
const isEditor = ref(false)//用于判断是否走编辑接口
const ditVisibleGy = ref(false)//工艺模板弹窗
const
formCreateOptions = ref({});//表单组件参数
//工艺
form
const procedure
Form = ref({
good_id: '',//绑定产品id
name: '',//工艺名称
// type_id: 0,//工艺分类
goods_name: '',//绑定产品名称
item: ''//工序节点
});
// #endregion
// #region 数据列表
function refreshProcedure() {
procedureData.value.name = ''
getProcedure()
}
async function getProcedure(page = 1) {
if (page) {
procedureData.value.current_page = page;
}
try {
loading.value = true;
let data = await request.post("/system/workmanship.workmanship_template/index", {
page: procedureData.value.current_page,
limit: procedureData.value.per_page,
name: procedureData.value.name
});
procedureData.value.current_page = data.data.current_page
procedureData.value.total = data.data.total
procedureData.value.data = data.data.data
loading.value = false;
} catch (error) {
loading.value = false;
}
}
getProcedure()
// #endregion
// #region 新增编辑
//点击新增 编辑
async function editProcedure(row) {
itemsgy.value = []
formRule.value = []
selectedItem.value = {}
fileList.value = []
if (row) {
try {
loading.value = true;
let data = await request.post("/system/workmanship.workmanship_template/read", {
id: row.id
});
loading.value = false
if( data.data.data.file){
fileList.value = data.data.data.file
}
procedure
Form.value = {
// goods_id: data.data.data.goods_id,//绑定产品id
name: data.data.data.name,//工艺名称
// type_id: '',//工艺分类
// goods_name: data.data.data.goods_name,//绑定产品名称
id: row.id
}
itemsgy.value = data.data.data.item
for (const item of itemsgy.value) {
try {
let data = await request.post("/system/workmanship.workmanship_template/getItem", {
id: item.id
});
//value是组件的值
let content =
formCreate.parseJson(data.data.
form.content);
const value = utils.decode
Format(content, data.data.item, 2);
item.options = value
item.option = content
//options是页面参数配置
formCreate.parseJson
// const options = (data.data.
form.options);
const options =
formCreate.parseJson(data.data.
form.options)
formCreateOptions.value = options
formCreateOptions.value.submitBtn.show = false
loading.value = false
} catch (error) {
loading.value = false;
}
}
isEditor.value = true
processLoading.value = false
} catch (error) {
processLoading.value = false
}
} else {
itemsgy.value = []
procedure
Form.value = {
name: '',//工艺名称
// type_id: '',//工艺分类
goods_name: 24,//绑定产品名称
item: '',//工序节点
id: ''
}
isEditor.value = false
}
ditVisibleGy.value = true;
}
// #endregion
// #region 获取工序分类
const dialogVisiblexzgx = ref(false);
const gymbLoading = ref(false)
const gxcclist = ref([])//存储当前选中的工序列表
const tableRef = ref(null); // 绑定 scTable 组件
const gxId = ref('')//工序id
// 打开工序选择弹窗，并获取工序类型数据=
function changeGx() {
getgxtype()
}
// 获取工序模板分类数据（工序类别）
async function getgxtype() {
try {
gymbLoading.value = true
let data = await request.post("/system/dictionary/getChildListByCode", { code: 'gongxu_type' });
gxtypeList.value = data.data
gxcclist.value = []
dialogVisiblexzgx.value = true;
tableRef.value.clearSelection(); // 清空选中
gymbLoading.value = false;
} catch (error) {
gymbLoading.value = false;
}
}
const gxtypeList = ref([])//已选中的工序 列表多选
//选择工序分类
function selectgx
Class(row) {
gxId.value = row.value
getTemplate(1)
}
// #endregion
// #region 获取工序模板
const tableloading = ref(false)
const processesList = ref({
current_page: 1,
per_page: 10,
total: 0,
data: [],
name: ''
})//工序模板列表
//工序
form表单
const
formGy = reactive({
workmanship_id: '',//工艺id
name: '',//工序名称
piece_type: '',//计件方式
dept: '',//报工部门
process_quota: '',//工序定额1启用2停用
price_type: '',//计酬方式1计件2计工时
process_price: 0,//工序单价
deduction: 0,//不合格扣款
sort: 0,//排序
});
const bomLoading = ref(false)
// 根据工序分类 ID 获取对应的工序列表
async function getTemplate(page = 1) {
tableloading.value = true
if (page) {
processesList.value.current_page = page;
}
let data = await request.post("/system/processes.processes_template/index", {
gongxufenlei_ids: gxId.value,
limit: processesList.value.per_page,
page: processesList.value.current_page,
name: processesList.value.name
});
tableloading.value = false
processesList.value.current_page = data.data.current_page
processesList.value.total = data.data.total
// 更新工序列表
processesList.value.data = data.data.data
nextTick(() => {
recoverSelection(); // 拉完数据恢复勾选
});
}
// 监听工序表格的多选事件，并更新已选中的工序数据
function handleSelectionChange(selection) {
// gxcclist.value = selection
// ⚡ selection 是当前页面选中的
// 我们需要同步到 gxcclist 里面，保证全局勾选
// 先删除本页数据在 gxcclist 里面的
const pageIds = processesList.value.data.map(item => item.id);
gxcclist.value = gxcclist.value.filter(item => !pageIds.includes(item.id));
// 再把最新的 selection 加进去
gxcclist.value = [...gxcclist.value, ...selection];
}
// 恢复勾选
function recoverSelection() {
if (!tableRef.value) return;
const tableData = processesList.value.data
tableData.
forEach((row) => {
const isSelected =
gxcclist.value.some(item => item.id === row.id) ||
itemsgy.value.some(item => item.id === row.id);
tableRef.value.toggleRowSelection(row, isSelected);
});
}
// 是否有数据
const is
FormFilled = ref(false);
function handleRowClick(row) {
tableRef.value.toggleRowSelection(row);
}
// 监听
formGy 变化
watch(
formGy,
(newVal) => {
is
FormFilled.value = Object.values(newVal).some(
(value) => value !== "" && value !== null && value !==
undefined
);
},
{ deep: true }
);
const selectProcessLoading = ref(false)//loading 按钮
// 确认选择工序，并关闭弹窗
async function selectProcess() {
itemsgy.value = gxcclist.value
refreshGx()
dialogVisiblexzgx.value = false
}
// #endregion
//#region 刷新工序展示列表最新数据
async function refreshGx() {
for (const item of itemsgy.value) {
let
form = {}
const res = await request.post("/system/crud/read", {
crud_id: 105,
id: item.id
});
// 格式化表单数据
const value = utils.decode
Format(
formCreate.parseJson(res.data.
form.content),
res.data.data,
2
);
// 表单渲染规则
form = value;
const options =
formCreate.parseJson(res.data.
form.options);
//默认给子表加上一条
form.
forEach((item) => {
if (item.field) {
if (item.field.includes("sub_")) {
if (item.value.length === 0) {
item.value = [{}];
}
}
}
});
// 编辑时删除默认数据，转而使用表单数据
// delete options.
form;
// 获取所有数据组件参数
const
formData =
formCreate.parseJson(
formCreate.toJson(get
FormRuleDescription(
form))
);
formCreateOptions.value = options
formCreateOptions.value.submitBtn.show = false
// 整理格式
const postData = utils.
format
Form(
formData);
// const psData =
formData
// **根据 id 匹配 itemsgy.value 数组的元素，并存入新字段 `options`**
const targetItem = itemsgy.value.find(el => el.id === item.id);
if (targetItem) {
targetItem.options = postData; // 存入 options 字段
targetItem.option =
form
}
}
}
// 记录用户点击的工序项（用于高亮显示）
async function selectItem(item) {
bomLoading.value = true
selectedItem.value = item; // 更新选中状态
formRule.value = item.option;//选中 赋给表单
is
FormFilled.value = true
bomLoading.value = false
}
//删除对应已选工序模板
function removeField(index) {
itemsgy.value.splice(index, 1);
}
// #endregion
//#region 新增工序 弹出公共页面的新增
const ditVisibleProcedure = ref(false)
const api = ref({})
const
formRuleAdd = ref([]);//用于新增模板
async function addProcedure() {
let res = await request.post("/system/crud/getCrud
Form", {
crud_id: 105
});
// 表单渲染规则
formRuleAdd.value =
formCreate.parseJson(res.data.content)
// 表单配置项
formCreateOptions.value = {
onSubmit: async () => {
// 表单验证通过后的提交方法
// 获取所有数据组件参数
let
formData =
formCreate.parseJson(
formCreate.toJson(get
FormRuleDescription(
formRuleAdd.value))
);
// 整理格式
let postData = utils.
format
Form(
formData);
await request.post("/system/crud/add", {
crud_id: 105,
form_data:
formCreate.toJson(postData)
});
ElMessage({
type: "success",
message: "操作成功",
});
ditVisibleProcedure.value = false
},
...
formCreate.parseJson(res.data.options)
};
ditVisibleProcedure.value = true
}
// #endregion
const imageUrls = ref('')
//#region 提交新增工艺
const gyloading = ref(false)//保存按钮loading
async function submitProcesses() {
if (gyloading.value) {
return
} // ✅ 防止双击或重复点击
if (!procedure
Form.value.name) {
ElMessage.error('请先填写工艺名称')
return;
}
let newArray = []; // 先定义 newArray，确保在整个作用域内可访问
if (itemsgy.value.length > 0) {
// 处理 itemsgy.value 数组，将 options 转换为 option 并删除 options 字段
newArray = itemsgy.value.map(item => {
// 获取所有数据组件参数
let
formData =
formCreate.parseJson(
formCreate.toJson(get
FormRuleDescription(item.option))
);
const newItem = {
...item,
option: utils.
format
Form(
formData)// 将 options 字段格式化后存入 option
};
delete newItem.options;// 删除原 options 字段
return newItem;// 返回处理后的新对象
})
}
if (fileList.value.length > 0) {
// 提取所有上传图片的 URL
imageUrls.value = fileList.value.map(file => file.full_path).join(',');
}
try {
// 发送 POST 请求，将数据提交到后端接口
// let data = await request.post("/system/workmanship.workmanship_template/add", );
gymbLoading.value = true
gyloading.value = true
let url = procedure
Form.value.id
? "/system/workmanship.workmanship_template/update"
: "/system/workmanship.workmanship_template/add";
// 尝试提交
let data = await request.post(url, {
name: procedure
Form.value.name, // 工艺模板名称
// goods_id: procedure
Form.value.goods_id, // 关联的商品 ID
goods_name: procedure
Form.value.goods_name, // 关联的商品名称
item: JSON.stringify(newArray), // 处理后的工艺项数据，转换为 JSON 字符串
id: procedure
Form.value.id,
file: imageUrls.value
});
if (data.code === 1) {
ElMessage({
message: '操作成功',
type: 'success',
})
await getProcedure()
gymbLoading.value = false
gyloading.value = false
ditVisibleGy.value = false
}
} catch (error) {
// positionLoading.value = false;
}
}
// #endregion
//#region 上传附件
// 上传之前的处理
const uploadBe
fore = (file) => {
const isImage = file.type.startsWith('image/');
const isSizeOk = file.size / 1024 / 1024 < 20; // 限制文件大小最大为 5MB
if (!isImage) {
ElMessage.error('只能上传图片文件！')
return false;
}
if (!isSizeOk) {
ElMessage.error('图片大小不能超过 5MB！')
return false;
}
gymbLoading.value = true; // 开启 loading
return true;
};
// 预览图片
const handlePictureCardPreview = (file) => {
dialogImageUrl.value = file.full_path; // 设置预览的图片地址
dialogVisibleImg.value = true; // 显示对话框
};
//上传成功的回调
const uploadSuccess = (response) => {
fileList.value.push({
original_name: response.data.original_name,
path: response.data.fullurl, // 带域名的完整路径
full_path: response.data.url // 相对路径
})
ElMessage({
type: "success",
message: "操作成功",
});
gymbLoading.value = false
};
// 上传失败的回调
const uploadError = (error, file) => {
console.error("上传失败：", error, file);
};
// 处理文件删除
// const handleRemove = (file, files) => {
// fileList.value = files; // 更新文件列表
// ElMessage.info(`已删除文件: ${file.name}`);
// };
//移除上传图纸
function delImg (index){
fileList.value.splice(index, 1);
}
// #endregion
//#region 删除工艺模板
async function delProcedure(row) {
ElMessageBox.confirm("确定要删除吗？这可能导致该数据无法找回", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
try {
loading.value = true;
await request.post("/system/workmanship.workmanship_template/delete", {
id: row.id,
});
ElMessage({
type: "success",
message: "操作成功",
});
getProcedure();
} catch (error) {
loading.value = false;
}
})
.catch(() => { });
}
// #endregion
</script>
<style scoped>
.item {
cursor: pointer;
float: left;
background: #fff;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 0 15px 15px 0;
border: 1px solid #e6e6e6;
display: block;
transition: all 0.3s;
/* 添加过渡效果 */
}
/* 选中时的样式 */
.selected {
border-color: #409eff;
/* 选中时的边框颜色 */
background-color: #e6f7ff;
/* 选中时的背景颜色 */
}
.cwxzlist {
display: flex;
}
.changeCheckbox {
display: block;
margin-bottom: 20px;
}
.addwarehouse {
margin-right: 10px;
}
:deep(.dialogGxgy .el-dialog__headerbtn) {
height: 57px !important;
}
.dialogtitle {
display: flex;
justify-content: space-between;
align-items: center;
}
.fullscreen-icon {
cursor: pointer;
font-size: 18px;
color: #606266;
transition: color 0.2s;
}
.fullscreen-icon:hover {
color: #409eff;
}
.dialog-icons {
display: flex;
align-items: center;
gap: 10px;
}
.gybs {
display: flex;
align-items: center;
width: 100%;
}
.gyheader {
margin-right: 20px;
display: flex;
align-items: center;
width: 24%;
}
.card_gy {
margin: 10px;
min-height: 500px;
position: relative;
}
::v-deep.card_gy .el-card__body {
width: 100%;
}
.tzpx {
height: 400px;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox 隐藏滚动条 */
}
.slx {
display: flex;
}
.sortable-item {
width: 100%;
padding: 15px 20px;
background: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 8px;
cursor: move;
margin-bottom: 12px;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333;
}
.sortable-item:hover {
background-color: #f5f5f5;
border-color: #dcdfe6;
color: #409eff;
}
.sortable-item:active {
trans
form: scale(0.98);
}
.sortable-item .drag-handle {
cursor: move;
font-size: 18px;
color: #999;
margin-right: 12px;
}
.sortable-item .drag-handle:hover {
color: #409eff;
}
.selected {
background: #409eff;
/* 选中状态变蓝色 */
color: white;
font-weight: bold;
}
.item_left {
margin-right: 8px;
}
.item_content {
flex: 1;
/* 占据中间可用空间 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item_right {
margin-left: 8px;
margin-left: auto;
/* 自动将右侧图标推到最右 */
cursor: pointer;
}
.btgp {
display: flex;
justify-content: center;
position: absolute;
bottom: 3%;
left: 50%;
trans
form: translateX(-50%);
}
.gy
form {
padding: 10px;
}
.dowt {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #e4e7ed;
border-bottom: 1px solid #e4e7ed;
padding: 12px 15px;
}
.route {
margin-top: 30px;
}
.image-preview-list {
width: 100%;
text-align: center;
padding-top: 30px;
/*
overflow-x: scroll; */
/* overflow: scroll; */
}
.image-preview-list::-webkit-scrollbar {
display: none;
/* Safari 和 Chrome 隐藏滚动条 */
}
/* ::v-deep .el-upload-list {
display: flex;
} */
.lf_aside {
border-left: 1px solid #e4e7ed;
display: flex;
justify-content: center;
}
.upbox {
width: 100%;
display: flex;
/* flex-wrap: wrap; */
justify-content: center;
flex-direction: column-reverse;
align-items: center;
}
.wdg {
width: 90%;
border: 1px solid #e4e7ed;
height: 50px;
border-radius: 5px;
display: flex;
align-items: center;
padding: 0 10px;
justify-content: space-between;
margin-top: 10px;
}
.wg_lf {
display: flex;
align-items: center;
cursor: pointer;
}
.weds {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80px;
display: flex;
margin-left: 5px;
}
</style>
这是我的代码 我的代码现在 handleSelectionChange 勾选列表有问题 如果我勾选多个 然后重新获取列表就会加载不上已勾选的状态
在 Rails 5.1 版本中，befor_filter 已被官方弃用，建议使用 before_action 替代，两者在功能上并无显著区别。
扫一扫
1877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
