<el-row><el-col

最新推荐文章于 2025-02-20 10:52:28 发布
转载 最新推荐文章于 2025-02-20 10:52:28 发布 · 575 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wcss/p/11002606.html
文章标签：

#javascript #ViewUI

ElementUI之Layout布局

基础布局

整个宽度分为24份，通过span属性来定义元素的宽度占多少

  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
  </el-row>

分栏间隔

通过row组件提供的gutter属性来指定每一栏之间的间隔，默认间隔为0

  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  </el-row>

混合布局

通过基础的1/24分栏任意扩展组合形成为复杂的混合布局

<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<

转载于:https://www.cnblogs.com/wcss/p/11002606.html

dida9419
关注
vue2:关于页面布局-行内列间间隔的调整
l_q_l的专栏
01-22 328
上图第三行，其实两个控件应该挨在一起的，但是每个控件都需要一个label，el-select自己无法在前面设置lable，只能通过el-form-item来设置，这样，两个el-form-item之间会有比较大的间隔，为了缩小这个间隔，我将第一个控件的size调大了一些，设为105%第一个控件放置一个el-form-item中，并设置label，第二个控件不需要label，就不需要往el-form-item中放，这样第二列就会仅挨着第一列展示，如上图第一行中的所属模块input和后面的维护模块按钮；
Element el-row el-col 布局组件详解
热门推荐
编程副队长
01-27 13万+
1. 背景 element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。 区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。 2. 分栏布局 首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。 如下代码，即为将1行等分为2列，为了便于区分列，我们为列
el-row和el-col
m0_67841039的博客
06-27 1738
是 Element UI 框架中的布局组件。Element UI 是一个基于 Vue.js 的前端组件库，它提供了一套丰富的 UI 组件，用于构建网页和应用程序的用户界面。：表示行组件，用于创建一个水平的布局容器。是 Flexbox 布局的属性，用于实现列的居中对齐。属性来分配不同的宽度比例，以适应不同的屏幕尺寸。Element UI 的官方文档提供了更多关于。的详细用法和高级配置选项，你可以访问。组件一起使用，以实现响应式布局。属性用于指定列的偏移量。属性用于指定列的宽度，：表示列组件，用于在。
Element-ui学习笔记1
weixin_33860553的博客
06-11 1191
1.col,row布局注意事项 el-row el-col gutter就是css，span的时候宽度是按boder-box来计算。 将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式 xs、sm、md、lg和...
ElementUI 组件：Layout布局（el-row、el-col）
ChinaDragon10的博客
01-31 4539
ElementUI 组件：Layout布局（el-row、el-col）
ElementUI 组件Layout布局 el-row和el-col 简介
ChinaDragon10的博客
01-31 6492
ElementUI 组件Layout布局 el-row和el-col 简介
<template> <div class="app-container"> <el-row :gutter="20"> <!--部门数据--> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/> </div> <div class="head-container"> <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/> </div> </el-col> <!--考勤配置信息--> <el-col :span="20" :xs="24"> <el-row class="mb8"> <el-alert title="考勤规则优先用自己单位设置的规则，如自己组织没有设置，则使用父级最近的组织所设置的规则。" type="success" :closable="false" style="padding: 20px"></el-alert> </el-row> <TableCard> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(form.id)" v-hasPermi="['hrm:workAttendancesConfig:remove']" v-if="form.ifExtends=='N'"> 删除配置 </el-button> </el-col> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="submitForm" v-hasPermi="['hrm:workAttendancesConfig:add']"> 保存 </el-button> </el-col> </el-row> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"> <el-form-item label="部门名称" prop="deptName"> <el-input v-model="form.deptName" placeholder="请点击左侧结构树" disabled/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"> <el-form-item label="是否考核" prop="ifExamine"> <el-select v-model="form.ifExamine" placeholder="请选择是否考核"> <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"> <el-form-item label="上班打卡时间" prop="startWorkTime"> <el-time-picker placeholder="请选择上班打卡时间" clearable :picker-options="{format:'HH:mm'}" value-format = "HH:mm" v-model="form.startWorkTime"> </el-time-picker> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8"> <el-form-item label="下班打卡时间" prop="finishWorkTime"> <el-time-picker placeholder="请选择下班打卡时间" clearable :picker-options="{format:'HH:mm'}" value-format = "HH:mm" v-model="form.finishWorkTime"> </el-time-picker> </el-form-item> </el-col> </el-row> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许迟到天数/月" prop="minLateDays"> <el-input v-model="form.minLateDays" placeholder="请输入每月允许迟到天数"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许早退天/月" prop="minLeaveEarlyDays"> <el-input v-model="form.minLeaveEarlyDays" placeholder="请输入每月允许早退天数"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许缺卡次数/月" prop="minLackTimes"> <el-input v-model="form.minLackTimes" placeholder="请输入每月允许缺卡次数"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="迟到罚款金额/天" prop="lateFine"> <el-input v-model="form.lateFine" placeholder="请输入迟到罚款金额/天"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="早退罚款金额/天" prop="leaveEarlyFine"> <el-input v-model="form.leaveEarlyFine" placeholder="请输入早退罚款金额/天"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="缺卡罚款金额/次" prop="lackFine"> <el-input v-model="form.lackFine" placeholder="请输入每月允许迟到天数/次"/> </el-form-item> </el-col> </el-row> <el-row> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/> </el-form-item> </el-row> <!-- 打卡地点表格 --> <el-row class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddLocation"> 添加打卡地 </el-button> </el-col> </el-row> <!-- 打卡地点表格 --> <el-table :data="locationList" style="width: 100%"> <el-table-column type="index" label="序号" width="60" align="center"/> <el-table-column prop="location" label="打卡地点" align="center"/> <el-table-column prop="coordinateX" label="经度" align="center"/> <el-table-column prop="coordinateY" label="纬度" align="center"/> <el-table-column prop="radius" label="打卡半径" align="center"/> <el-table-column label="操作" align="center" width="150"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEditLocation(scope.row)">修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteLocation(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-form> </TableCard> </el-col> </el-row> <!-- 添加打卡地对话框 --> <el-dialog :title="locationDialogTitle" :visible.sync="locationDialogOpen" width="900px" append-to-body> <el-form ref="locationForm" :model="locationForm" :rules="locationRules" label-width="100px"> <el-row> <el-col :span="24"> <el-form-item label="打卡地点" prop="location"> <el-input v-model="locationForm.location" placeholder="请输入打卡地点名称"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="打卡半径" prop="radius"> <el-input v-model="locationForm.radius" placeholder="请输入打卡半径" @input="handleRadiusChange"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="经　　度" prop="coordinateX"> <el-input v-model="locationForm.coordinateX" placeholder="请点击地图选择" disabled/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="纬　　度" prop="coordinateY"> <el-input v-model="locationForm.coordinateY" placeholder="请点击地图选择" disabled/> </el-form-item> </el-col> </el-row> <!-- 表单中的地图组件 --> <el-form-item label="地图选点"> <div class="mapRow"> <div id="locationMapContainer" style="width: 100%; height: 400px;"></div> <!-- 搜索输入条 --> <el-row class="seachAddress"> <el-input id="locationTipInput" v-model="locationMapAddress" placeholder="请输入地址进行搜索" @input="searchLocationKeyWord"/> </el-row> <!-- 搜索结果 --> <div class="map_search_result" v-show="showLocationSearchResult"> <div class="row" @click="markerLocationResult(item)" v-for="(item,index) in locationPoiList" :key="index">{{item.name}}</div> </div> </div> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitLocationForm">保存</el-button> <el-button @click="cancelLocationForm">关闭</el-button> </div> </el-dialog> </div> </template> <script> import { addWorkAttendancesConfig, delWorkAttendancesConfig, selectHrmWorkAttendancesConfigByDeptId, updateWorkAttendancesConfig, listWorkAttendancesConfig } from "@/api/hrm/workAttendancesConfig"; import {treeselect} from "@/api/system/dept"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import AMapLoader from '@amap/amap-jsapi-loader'; window._AMapSecurityConfig = { securityJsCode: '7a2fbce5a795a9a2f9215c3c2ddb4d1b',//你的秘钥 } export default { name: "WorkAttendancesConfig", dicts: ['sys_yes_no'], data() { return { // 修改：将写死的数据改为空数组，从接口获取 locationList: [], locationDialogOpen: false, locationDialogTitle: "", locationForm: { id: null, location: "", radius: "300", coordinateX: "", // 修改：改为coordinateX coordinateY: "" // 修改：改为coordinateY }, locationRules: { location: [ { required: true, message: "打卡地点不能为空", trigger: "blur" } ], radius: [ { required: true, message: "打卡半径不能为空", trigger: "blur" } ], coordinateX: [ // 修改：改为coordinateX { required: true, message: "请选择经度", trigger: "blur" } ], coordinateY: [ // 修改：改为coordinateY { required: true, message: "请选择纬度", trigger: "blur" } ] }, // 地点选择地图相关数据 locationMap: null, locationMapAddress: "", locationPoiList: [], showLocationSearchResult: false, locationGeocoder: null, locationPlaceSearchComponent: null, locationAutoCompleteComponent: null, // 地图覆盖物 locationMarker: null, locationCircle: null, // 地图初始化状态标志 isLocationMapReady: false, deptId:"", deptName: "", attendanceType: "", deptOptions: [], defaultProps: { children: "children", label: "label" }, form: { radius:300 }, rules: { coordinateX: [ {required: true, message: "经度不能为空", trigger: "blur"} ], coordinateY: [ {required: true, message: "纬度不能为空", trigger: "blur"} ], radius:[ {required: true, message: "打卡半径不能为空", trigger: "blur"} ], ifExamine:[ {required: true, message: "是否需要考核不能为空", trigger: "blur"} ], finishWorkTime:[ {required: true, message: "下班打卡时间不能为空", trigger: "blur"} ], startWorkTime:[ {required: true, message: "上班打卡时间不能为空", trigger: "blur"} ] } }; }, created() { this.getTreeselect(); }, unmounted() { this.locationMap?.destroy(); }, methods: { // 添加打卡地点 handleAddLocation() { this.resetLocationForm(); this.locationDialogTitle = "添加打卡地"; this.locationDialogOpen = true; this.$nextTick(() => { this.initLocationMap(); }); }, // 编辑打卡地点 handleEditLocation(row) { this.resetLocationForm(); this.locationDialogTitle = "修改打卡地"; this.locationDialogOpen = true; // 修改：字段映射 this.locationForm = { id: row.id, location: row.location, radius: row.radius, coordinateX: row.coordinateX, // 修改：改为coordinateX coordinateY: row.coordinateY // 修改：改为coordinateY }; this.$nextTick(() => { this.initLocationMap().then(() => { if (this.locationForm.coordinateX && this.locationForm.coordinateY) { this.showLocationMarker(this.locationForm.coordinateX, this.locationForm.coordinateY); this.showLocationCircle(this.locationForm.coordinateX, this.locationForm.coordinateY, this.locationForm.radius); } }); }); }, // 删除打卡地点 handleDeleteLocation(row) { this.$modal.confirm('是否确认删除该打卡地点？').then(() => { // 修改：调用删除接口 delWorkAttendancesConfig(row.id).then(response => { if (response.code === 200) { this.$modal.msgSuccess("删除成功"); // 重新加载数据 this.loadLocationList(); } else { this.$modal.msgError(response.msg || "删除失败"); } }).catch(error => { console.error("删除失败:", error); this.$modal.msgError("删除失败"); }); }); }, // 加载打卡地点列表 loadLocationList() { if (!this.deptId) return; const params = { deptId: this.deptId, attendanceType: 1 }; // listWorkAttendancesConfig(params).then(response => { // if (response.code === 200) { // this.locationList = response.rows || []; // } else { // this.$modal.msgError("获取打卡地点列表失败"); // this.locationList = []; // } // }).catch(error => { // console.error("获取打卡地点列表失败:", error); // this.locationList = []; // }); listWorkAttendancesConfig(params).then(response => { if (response.code === 200) { // ✅ 映射字段：locationName -> location this.locationList = (response.rows || []).map(item => ({ ...item, location: item.location || item.locationName || '未知地点' // 兜底 })); } else { this.$modal.msgError("获取打卡地点列表失败"); this.locationList = []; } }).catch(error => { console.error("获取打卡地点列表失败:", error); this.locationList = []; }); }, // 初始化地图 async initLocationMap() { return new Promise((resolve, reject) => { if (this.locationMap) { this.locationMap.destroy(); } AMapLoader.load({ key: "653c4c81c212e962e26cc788725c6794", version: "2.0", plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.ToolBar', 'AMap.Scale'], }).then((AMap) => { this.locationMap = new AMap.Map("locationMapContainer", { viewMode: "3D", zoom: 12, }); // 添加地图控件 this.locationMap.addControl(new AMap.Scale()); this.locationMap.addControl(new AMap.ToolBar()); this.locationMap.on('click', (e) => { const lng = e.lnglat.lng; const lat = e.lnglat.lat; this.locationForm.coordinateX = lng; // 修改：改为coordinateX this.locationForm.coordinateY = lat; // 修改：改为coordinateY this.showLocationMarker(lng, lat); this.showLocationCircle(lng, lat, this.locationForm.radius); }); this.locationMapSearchInit(AMap); this.isLocationMapReady = true; resolve(this.locationMap); }).catch((error) => { console.error('地图初始化失败:', error); this.$message.error('地图初始化失败，请刷新页面重试'); reject(error); }); }); }, // 显示地点标记 showLocationMarker(lng, lat) { if (!this.locationMap || !this.isLocationMapReady) { console.warn('地图尚未就绪，无法添加标记'); return; } // 清除之前的标记 if (this.locationMarker) { this.locationMap.remove(this.locationMarker); } this.locationMarker = new AMap.Marker({ position: new AMap.LngLat(lng, lat) }); this.locationMap.add(this.locationMarker); this.locationMap.setCenter([lng, lat]); }, // 显示范围圆圈 showLocationCircle(lng, lat, radius) { if (!this.locationMap || !this.isLocationMapReady) { console.warn('地图尚未就绪，无法添加圆圈'); return; } // 清除之前的圆圈 if (this.locationCircle) { this.locationMap.remove(this.locationCircle); } // 如果半径有效且大于0，显示圆圈 if (radius && radius > 0 && lng && lat) { const lnglat = [lng, lat]; this.locationCircle = new AMap.Circle({ center: lnglat, radius: parseInt(radius), borderWeight: 3, strokeColor: "#FF33FF", strokeWeight: 2, strokeOpacity: 0.8, fillOpacity: 0.2, strokeStyle: 'dashed', strokeDasharray: [5, 5], fillColor: '#1791fc', zIndex: 50, }); this.locationMap.add(this.locationCircle); // 调整地图视野以包含圆圈 this.locationMap.setFitView([this.locationCircle]); } }, // 半径变化处理 handleRadiusChange() { // 延迟处理，避免频繁重绘 clearTimeout(this.radiusTimer); this.radiusTimer = setTimeout(() => { if (this.locationForm.coordinateX && this.locationForm.coordinateY && this.locationForm.radius) { this.showLocationCircle( this.locationForm.coordinateX, this.locationForm.coordinateY, this.locationForm.radius ); } }, 300); }, // 地点搜索初始化 locationMapSearchInit(AMap) { const autoOptions = { input: "locationTipInput", }; this.locationAutoCompleteComponent = new AMap.Autocomplete(autoOptions); const placeSearchOptions = { city: "", type: "", pageSize: 10, pageIndex: 1, extensions: "base" }; this.locationPlaceSearchComponent = new AMap.PlaceSearch(placeSearchOptions); }, // 搜索地点关键词 searchLocationKeyWord() { if (!this.locationMap || !this.isLocationMapReady) { console.warn('地图尚未就绪，无法搜索'); return; } this.locationPlaceSearchComponent.search(this.locationMapAddress, (status, result) => { if (status === 'complete' && result.info === "OK") { this.showLocationSearchResult = true; this.locationPoiList = result.poiList.pois; } else { this.showLocationSearchResult = true; this.locationPoiList = []; } }); }, // 选择搜索结果 markerLocationResult(data) { this.locationPoiList = []; this.showLocationSearchResult = false; this.locationMapAddress = data.name; this.locationForm.coordinateX = data.location.lng; // 修改：改为coordinateX this.locationForm.coordinateY = data.location.lat; // 修改：改为coordinateY this.showLocationMarker(data.location.lng, data.location.lat); this.showLocationCircle(data.location.lng, data.location.lat, this.locationForm.radius); }, // 提交地点表单 // submitLocationForm() { // this.$refs["locationForm"].validate(valid => { // if (valid) { // // 准备提交的数据 // const locationData = { // deptId: this.deptId, // location: this.locationForm.location, // coordinateX: this.locationForm.coordinateX, // 修改：改为coordinateX // coordinateY: this.locationForm.coordinateY, // 修改：改为coordinateY // radius: this.locationForm.radius, // attendanceType: 1 // }; // // 如果有ID，则是修改，否则是新增 // const apiCall = this.locationForm.id // ? updateWorkAttendancesConfig({ ...locationData, id: this.locationForm.id }) // : addWorkAttendancesConfig(locationData); // apiCall.then(response => { // if (response.code === 200) { // this.$modal.msgSuccess("操作成功"); // this.locationDialogOpen = false; // // 重新加载数据 // this.loadLocationList(); // } else { // this.$modal.msgError(response.msg || "操作失败"); // } // }).catch(error => { // console.error("保存失败:", error); // this.$modal.msgError("保存失败"); // }); // } // }); // }, // 提交地点表单 submitLocationForm() { this.$refs["locationForm"].validate(valid => { if (valid) { const locationData = { deptId: this.deptId, location: this.locationForm.location, coordinateX: this.locationForm.coordinateX, coordinateY: this.locationForm.coordinateY, radius: parseInt(this.locationForm.radius), attendanceType: 1 }; const apiCall = this.locationForm.id ? updateWorkAttendancesConfig({ ...locationData, id: this.locationForm.id }) : addWorkAttendancesConfig(locationData); apiCall.then(response => { if (response.code === 200) { this.$modal.msgSuccess("操作成功"); this.locationDialogOpen = false; // ✅ 补救措施：如果新增成功，且后端没返回 location，则手动注入 if (!this.locationForm.id && response.data) { // 假设 response.data 是新记录对象 if (!response.data.location) { response.data.location = this.locationForm.location; } // 手动添加到列表头部 this.locationList.unshift(response.data); } else { // 修改或正常情况：刷新列表 this.loadLocationList(); } } else { this.$modal.msgError(response.msg || "操作失败"); } }).catch(error => { console.error("保存失败:", error); this.$modal.msgError("保存失败"); }); } }); }, // 取消地点表单 cancelLocationForm() { this.locationDialogOpen = false; this.locationMarker = null; this.locationCircle = null; this.isLocationMapReady = false; }, // 重置地点表单 resetLocationForm() { this.locationForm = { id: null, location: "", radius: "300", coordinateX: "", // 修改：改为coordinateX coordinateY: "" // 修改：改为coordinateY }; this.locationMapAddress = ""; this.locationPoiList = []; this.showLocationSearchResult = false; this.locationMarker = null; this.locationCircle = null; this.isLocationMapReady = false; }, /** 查询部门下拉树结构 */ getTreeselect() { treeselect().then(response => { this.deptOptions = response.data; }); }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 - 修改：点击部门节点时加载数据 handleNodeClick(data) { this.reset(); this.deptId = data.id; this.deptName = data.label; // 加载考勤配置 const params = { deptId: this.deptId, attendanceType: 1 }; this.getConfigByDeptId(params); // 加载打卡地点列表 this.loadLocationList(); }, // 表单重置 reset() { this.form = { id: null, deptName: null, coordinateX: null, coordinateY: null, radius: null, ifExamine: null, minLateDays: null, minLeaveEarlyDays: null, minAbsenteeismDays: null, startWorkTime: null, finishWorkTime: null, absenteeismHours: null, lateFine: null, leaveEarlyFine: null, absenteeismFine: null, createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null, tenantId: null }; this.resetForm("form"); }, /** 根据部门ID查询考勤配置 */ getConfigByDeptId(params) { selectHrmWorkAttendancesConfigByDeptId(params).then(response => { if(200 == response.code){ if(!response.data){ this.form.deptId = params.deptId; this.form.attendanceType = this.attendanceType; }else{ this.form = response.data; if("Y"==this.form.ifExtends){ this.form.attendanceType = this.form.attendanceType + "（继承自："+this.form.extendsDeptName+"）"; } } } }); }, /** 保存按钮 */ submitForm() { if (!this.form.deptId) { this.$modal.msgError("请选择需要配置的部门"); return; } if(this.form.ifExtends=="Y"){ this.$modal.confirm('该部门目前的配置为继承自父级单位，您是否想讲该配置保存为该单位自身的配置？').then( ()=> { this.form.id = null; this.form.deptId = this.deptId; this.doSubmit(); }) }else{ this.doSubmit(); } }, doSubmit(){ this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateWorkAttendancesConfig(this.form).then(response => { this.$modal.msgSuccess("修改成功"); }); } else { addWorkAttendancesConfig(this.form).then(response => { this.$modal.msgSuccess("新增成功"); }); } } }); }, /** 删除按钮操作 */ handleDelete(id) { this.$modal.confirm('是否确认删除考勤配置的数据项？').then( ()=> { return delWorkAttendancesConfig(id); }).then(() => { this.getConfigByDeptId(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); } } }; </script> <style scoped lang="scss"> #locationMapContainer { width: 100%; height: 400px; border: 1px solid #dcdfe6; border-radius: 4px; } .map_search_result { max-height: 200px; overflow-y: auto; } .mapRow{ position: relative; .seachAddress{ position: absolute; top: 10px; left: 10px; width: 450px; z-index: 999; } .map_search_result{ display: flex; flex-direction: column; border: 1px solid #dddddd; width: 450px; margin-top: 10px; background-color: #FFFFFF; position: absolute; top: 46px; left: 10px; z-index: 999; .row{ padding: 10px; border-top: 1px solid #dddddd; font-size: 14px; cursor: pointer; } .row:hover{ background-color: #eeeeee; } .row:first-child{ border-top: none; } } } </style> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许迟到天数/月" prop="minLateDays"> <el-input v-model="form.minLateDays" placeholder="请输入每月允许迟到天数"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许早退天/月" prop="minLeaveEarlyDays"> <el-input v-model="form.minLeaveEarlyDays" placeholder="请输入每月允许早退天数"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="允许缺卡次数/月" prop="minLackTimes"> <el-input v-model="form.minLackTimes" placeholder="请输入每月允许缺卡次数"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="迟到罚款金额/天" prop="lateFine"> <el-input v-model="form.lateFine" placeholder="请输入迟到罚款金额/天"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="早退罚款金额/天" prop="leaveEarlyFine"> <el-input v-model="form.leaveEarlyFine" placeholder="请输入早退罚款金额/天"/> </el-form-item> </el-col> <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" v-if="form.ifExamine=='Y'"> <el-form-item label="缺卡罚款金额/次" prop="lackFine"> <el-input v-model="form.lackFine" placeholder="请输入每月允许迟到天数/次"/> </el-form-item> </el-col> </el-row>这6个怎么不显示了
最新发布
11-22
<el-row> <el-col :xs="8" ... v-if="form.ifExamine=='Y'">允许迟到天数/月</el-col> <el-col :xs="8" ... v-if="form.ifExamine=='Y'">允许早退天/月</el-col> <el-col :xs="8" ... v-if="form.ifExamine=='Y'...
<!-- 供应商索赔确认单-详情查看界面 --> <template> <div class="app-container"> <el-form ref="modalForm" :title="title" :model="modalForm"> <div class="form-title"> {{ title }} </div> <div class="form-bordered"> <el-collapse v-model="activeNames"> <!-- 基本信息 --> <el-collapse-item name="1"> <template slot="title">{{$t('BasicInformation')}}<span style="color: #004097; font-weight: 900">（{{$t('ClickToExpandOrcollapse')}}）</span></template> <div class="form-bordered"> <el-row> <!-- 编号 --> <el-col :span="12"> <el-form-item :label="$t('rm.rm.formCode')"> <span v-if="modalForm.formCode">{{ modalForm.formCode }}</span><span v-else style="color: red;">提交后自动生成</span> </el-form-item> </el-col> <!-- 来源 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.source')"> <span >{{ modalForm.source }}</span> </el-form-item> </el-col> </el-row> <el-row> <!-- 供方简称 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.shortName')" > <span >{{ modalForm.shortName }}</span> </el-form-item> </el-col> <!-- 申请部门名称 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.applyDeptBy')"> <org-picker-view :value.sync="modalForm.applyDeptBy" /> </el-form-item> </el-col> </el-row> <el-row> <!-- 申请日期 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.applicatTime')"> <span>{{ modalForm.createTime }}</span> </el-form-item> </el-col> <!-- 物料名称 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.materialName')"> <span >{{ modalForm.materialName }}</span> </el-form-item> </el-col> </el-row> <el-row> <!-- 物料编码 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.materialCode')"> {{modalForm.materialCode}} </el-form-item> </el-col> <!-- 订单号 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.orderCode')"> <span >{{ modalForm.orderCode }}</span> </el-form-item> </el-col> </el-row> <el-row> <!-- 实际扣款物料名称 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.deductedMaterialName')"> {{modalForm.deductedMaterialName}} </el-form-item> </el-col> <!-- 实际扣款物料编码 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.deductedMaterialCode')"> <span >{{ modalForm.deductedMaterialCode }}</span> </el-form-item> </el-col> </el-row> <el-row> <!-- 数量 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.quantityNum')"> <span >{{ modalForm.quantityNum }}</span> </el-form-item> </el-col> <!-- 质量协议 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.dealUrl')"> <fileUpload v-model="modalForm.dealUrl" :limit="1" :is-read-only="true" /> </el-form-item> </el-col> </el-row> <el-row> <!-- 异常描述 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.description')"> <span>{{ modalForm.description }}</span> </el-form-item> </el-col> <!-- 异常描述附件 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.descriptionUrl')"> <fileUpload v-model="modalForm.descriptionUrl" :limit="1" :is-read-only="true" /> </el-form-item> </el-col> </el-row> <el-row> <!-- sqe --> <el-col :span="12"> <el-form-item :label="$t('SQE')"> {{modalForm.createBy}} </el-form-item> </el-col> <!-- 采购人 --> <el-col :span="12" > <el-form-item :label="$t('spl.supplierClaim.purchaserByName')" > <org-picker-view :value.sync="modalForm.purchaserBy" /> </el-form-item> </el-col> </el-row> <el-row> <!-- 是否对账 --> <el-col :span="12" > <el-form-item :label="$t('spl.supplierClaim.hasReconciliationNumber')" prop="hasReconciliationNumber"> {{modalForm.hasReconciliationNumber}} </el-form-item> </el-col> <!-- 对账凭证 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.reconciliationVoucher')"> <fileUpload v-model="modalForm.reconciliationVoucher" :is-read-only="true" /> </el-form-item> </el-col> </el-row> </div> </el-collapse-item> <el-collapse-item name="2"> <template slot="title">异常费用核算<span style="color: #004097; font-weight: 900">（{{$t('ClickToExpandOrcollapse')}}）</span></template> <el-tabs v-model="activeTab" type="card"> <el-tab-pane v-for="(item, index) in modalForm.classifyList" :key="index" :label="`${item.materialName}`" :name="item.materialCode" > <el-row> <el-col :span="24"> <el-table :data="item.processFeeList" border> <span slot="title">误工费用：</span> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 加工数量 --> <el-table-column align="center" :label="$t('spl.supplierClaim.workQty')"> <template slot-scope="scope"> <span>{{ scope.row.workQty}}</span> </template> </el-table-column> <!-- 加工单价 --> <el-table-column align="center" :label="$t('spl.supplierClaim.workPrice')"> <template slot-scope="scope"> <span>{{ scope.row.workPrice}}</span> </template> </el-table-column> <!-- 加工费用合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.workTotal')"> <template slot-scope="scope"> <span>{{ scope.row.workTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <el-row> <el-col :span="24"> <span slot="title">材料损失费用：</span> <el-table :data="item.materialLossFeeList" border> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 材料编码 --> <el-table-column align="center" :label="$t('spl.supplierClaim.matterCode')"> <template slot-scope="scope"> <span>{{ scope.row.matterCode}}</span> </template> </el-table-column> <!--材料名称--> <el-table-column align="center" :label="$t('spl.supplierClaim.matterName')"> <template slot-scope="scope"> <span>{{ scope.row.matterName}}</span> </template> </el-table-column> <!-- 材料损失数量 --> <el-table-column align="center" :label="$t('spl.supplierClaim.matterNum')"> <template slot-scope="scope"> <span>{{ scope.row.matterNum}}</span> </template> </el-table-column> <!-- 材料损失单价 --> <el-table-column align="center" :label="$t('spl.supplierClaim.matterPrice')"> <template slot-scope="scope"> <span>{{ scope.row.matterPrice}}</span> </template> </el-table-column> <!-- 材料损失合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.matterTotal')"> <template slot-scope="scope"> <span>{{ scope.row.matterTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <!-- 3、误工费用 --> <el-row> <el-col :span="24"> <span slot="title">误工费用：</span> <el-table :data="item.lostWagesFeeList" border> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 误工时间 --> <el-table-column align="center" :label="$t('spl.supplierClaim.delayTime')"> <template slot-scope="scope"> <span>{{ scope.row.delayTime}}</span> </template> </el-table-column> <!--误工单价--> <el-table-column align="center" :label="$t('spl.supplierClaim.delayPrice')"> <template slot-scope="scope"> <span>{{ scope.row.delayPrice}}</span> </template> </el-table-column> <!-- 误工合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.delayTotal')"> <template slot-scope="scope"> <span>{{ scope.row.delayTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <!--4、外观修复费用--> <el-row> <el-col :span="24"> <span slot="title">外观修复费用：</span> <el-table :data="item.repairFeeList" border> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 补漆个数 --> <el-table-column align="center" :label="$t('spl.supplierClaim.repairNum')"> <template slot-scope="scope"> <span>{{ scope.row.repairNum}}</span> </template> </el-table-column> <!--补漆单价--> <el-table-column align="center" :label="$t('spl.supplierClaim.repairPrice')"> <template slot-scope="scope"> <span>{{ scope.row.repairPrice}}</span> </template> </el-table-column> <!-- 补漆费用合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.repairTotal')"> <template slot-scope="scope"> <span>{{ scope.row.repairTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <!--5、占地费用--> <el-row> <el-col :span="24"> <span slot="title">占地费用：</span> <el-table :data="item.squareFeeList" border> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 占地面积 --> <el-table-column align="center" :label="$t('spl.supplierClaim.venueArea')"> <template slot-scope="scope"> <span>{{ scope.row.venueArea}}</span> </template> </el-table-column> <!--平方单价--> <el-table-column align="center" :label="$t('spl.supplierClaim.venuePrice')"> <template slot-scope="scope"> <span>{{ scope.row.venuePrice}}</span> </template> </el-table-column> <!-- 占地费用合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.venueTotal')"> <template slot-scope="scope"> <span>{{ scope.row.venueTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <!--6、其他费用--> <el-row> <el-col :span="24"> <span slot="title">其他费用：</span> <el-table :data="item.otherFeeList" border> <el-table-column align="center" type="index" :label="$t('no')" width="50" /> <!-- 其他客户赔款 --> <el-table-column align="center" :label="$t('spl.supplierClaim.otherIndemnity')"> <template slot-scope="scope"> <span>{{ scope.row.otherIndemnity}}</span> </template> </el-table-column> <!--其他品质处罚--> <el-table-column align="center" :label="$t('spl.supplierClaim.otherPenalize')"> <template slot-scope="scope"> <span>{{ scope.row.otherPenalize}}</span> </template> </el-table-column> <!--其他类型--> <el-table-column align="center" :label="$t('spl.supplierClaim.otherTypes')"> <template slot-scope="scope"> <span>{{ scope.row.otherTypes}}</span> </template> </el-table-column> <!--其他类型金额--> <el-table-column align="center" :label="$t('spl.supplierClaim.otherTypesAmounts')"> <template slot-scope="scope"> <span>{{ scope.row.otherTypesAmounts}}</span> </template> </el-table-column> <!-- 其他费用合计 --> <el-table-column align="center" :label="$t('spl.supplierClaim.otherTypesAmounts')"> <template slot-scope="scope"> <span>{{ scope.row.otherTotal}}</span> </template> </el-table-column> </el-table> </el-col> </el-row> <el-row> <el-col :span="6"> <el-form-item :label="$t('spl.supplierClaim.subDiscount')" > <span>{{ item.subDiscount }}</span> </el-form-item> </el-col> </el-row> </el-tab-pane> </el-tabs> <!-- 合计 --> <!-- 合计 --> <div class="form-bordered"> <el-row> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.totalBy')" > <span>{{ modalForm.totalBy }}</span> </el-form-item> </el-col> <!-- 折扣 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.discount')" prop="discount"> {{formatNumber(modalForm.discount)}} </el-form-item> </el-col> </el-row> <el-row> <!-- 最终索赔金额 --> <el-col :span="24"> <el-form-item :label="$t('spl.supplierClaim.finalAmount')" > {{formatNumber(modalForm.finalAmount)}} </el-form-item> </el-col> </el-row> </div> </el-collapse-item> </el-collapse> </div> <div class="form-bordered"> <el-row> <!-- 供应商回签意见 --> <template slot="title">{{$t('spl.supplierClaim.supplierEndorsement')}}<span style="color: #004097; font-weight: 900">（{{$t('ClickToExpandOrcollapse')}}）</span></template> <el-col :span="24"><el-form-item :label="$t('spl.supplierClaim.backIdea')"> <span> {{ modalForm.backIdea}} </span> </el-form-item></el-col> </el-row> <el-row> <!-- 供应商回签附件 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.exportOfAignedAttachments')"> <viewSettings @handleExportWord="handleExportWord" /> </el-form-item> </el-col> <!-- 回签附件上传 --> <el-col :span="12"> <el-form-item :label="$t('spl.supplierClaim.uploadFile')" > <fileUpload v-model="modalForm.uploadFile" :limit="10" :is-read-only="true" /> </el-form-item> </el-col> </el-row> <el-row> <!-- 对账单号 --> <el-col :span="24"> <el-form-item :label="$t('spl.supplierClaim.statementNumber')"> {{modalForm.statementNumber}} </el-form-item> </el-col> </el-row> </div> </el-form> </div> </template> <script> import { getSupplierClaimConfirmInfo } from '@/api/spl/supplierClaimForm/api'; import moment from 'moment' import viewSettings from "@/components/viewSettings"; export default { name: 'CompanyWorkPlanYearDetail', components: { moment, viewSettings }, props: { command: { type: Object, default: () => { } } }, data() { return { modalForm: { // 表单实体 }, // 弹出层标题 title: '供应商索赔单', activeNames: ['1','2'], roleId:0, tableData:[{name:'供应商1'},{name:'供应商2'},{name:'供应商3'},{name:'供应商4'}], activeTab:'' } }, created() { if (JSON.parse(this.$route.query.dataForm).id) { getSupplierClaimConfirmInfo(JSON.parse(this.$route.query.dataForm).id).then( response => { this.modalForm = response.data this.activeTab = this.modalForm.sonList[0].materialName } ) } }, methods: { /** 查询demo数据 */ // openModal() { // getCompanyWorkPlanYearInfo(this.command.data.id).then( // response => { // this.modalForm = response.data // this.$emit('getModalForm',this.modalForm) // } // ) // } , // 更新当前选中的标签 updateTableData(tab) { this.activeTab = tab.name // 更新当前选中的标签 }, /** 格式化时间 */ checkDateTime(val) { return moment(val).format('yyyy-MM-dd HH:mm:ss') }, formatNumber(num) { if(num||num == 0){ const parts = num.toString().split('.'); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); return '￥'+ Number(num).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')+'元'; } }, /** 导出word按钮操作 */ handleExportWord() { for (let i = 0; i < this.modalForm.sonList.length; i++) { this.modalForm.titleWord = this.title; this.exportDownWord2Pdf({ templatePath: "templates/word/supplyClaim.docx", data: this.modalForm.sonList[i] }, this.modalForm.sonList[i].materialName+'-'+this.title); } }, } } </script> <style lang="scss" scoped> .Twoheader { display: flex; justify-content: space-between; width: 100%; div { text-align: center } .red { padding-right: 5px; color: #F54A4F; } } .Twoheader>div { text-align: center } ::v-deep .el-collapse-item__content { padding-bottom: 5px; } ::v-deep .no-scroll-x { overflow-x: hidden !important; } ::v-deep .no-scroll-x .cell { overflow: hidden !important; } ::v-deep .no-scroll-x .el-table__body-wrapper { overflow-x: hidden !important; } ::v-deep.no-scroll .el-table__body-wrapper { overflow-x: hidden !important; } ::v-deep.no-scroll .el-table__body { overflow: hidden !important; } ::v-deep.no-scroll--scrollable-x .el-table__body-wrapper { overflow-x: hidden !important; } .col_right_border { border-right: 1px solid #e8e8e8; } .fy_title_box { height: 30px; line-height: 30px; text-align: center; background: #f8f8f9; } .required::before { position: absolute; top: 50%; left: 0; height: 8px; margin-top: -13px; color: #F54A4F; content: "*"; } </style> 给我在子tabs里面 table上加一个标题
09-30
要在供应商索赔确认单详情查看界面的子 `tabs` 里的 `table` 添加标题，可以在 `el-table` 标签之前添加一个标题元素，如 `<span>` 或 `<div>`。以下是修改后的模板代码： ```vue <template> <div class="app-...
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> </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:menu:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" >展开/折叠</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="icon" label="图标" align="center" width="100"> <template slot-scope="scope"> <svg-icon :icon-class="scope.row.icon" /> </template> </el-table-column> <el-table-column prop="orderNum" label="排序" width="60"></el-table-column> <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="status" label="状态" width="80"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="创建时间" align="center" prop="createTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <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:menu:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" >新增</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" >删除</el-button> </template> </el-table-column> </el-table> <!-- 添加或修改菜单对话框 --> <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-row> <el-col :span="24"> <el-form-item label="上级菜单" prop="parentId"> <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="菜单类型" prop="menuType"> <el-radio-group v-model="form.menuType"> <el-radio label="M">目录</el-radio> <el-radio label="C">菜单</el-radio> <el-radio label="F">按钮</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item label="菜单图标" prop="icon"> <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()" > <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" style="width: 25px;" /> <i v-else slot="prefix" class="el-icon-search el-input__icon" /> </el-input> </el-popover> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="显示排序" prop="orderNum"> <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="form.menuName" placeholder="请输入菜单名称" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="routeName"> <el-input v-model="form.routeName" placeholder="请输入路由名称" /> <span slot="label"> <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由名称 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="isFrame"> <span slot="label"> <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否外链 </span> <el-radio-group v-model="form.isFrame"> <el-radio label="0">是</el-radio> <el-radio label="1">否</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="path"> <span slot="label"> <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由地址 </span> <el-input v-model="form.path" placeholder="请输入路由地址" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="component"> <span slot="label"> <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 组件路径 </span> <el-input v-model="form.component" placeholder="请输入组件路径" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'M'"> <el-form-item prop="perms"> <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> <span slot="label"> <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 权限字符 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="query"> <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> <span slot="label"> <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由参数 </span> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="isCache"> <span slot="label"> <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否缓存 </span> <el-radio-group v-model="form.isCache"> <el-radio label="0">缓存</el-radio> <el-radio label="1">不缓存</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="visible"> <span slot="label"> <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 显示状态 </span> <el-radio-group v-model="form.visible"> <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="status"> <span slot="label"> <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 菜单状态 </span> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu" import Treeselect from "@riophae/vue-treeselect" import "@riophae/vue-treeselect/dist/vue-treeselect.css" import IconSelect from "@/components/IconSelect" export default { name: "Menu", dicts: ['sys_show_hide', 'sys_normal_disable'], components: { Treeselect, IconSelect }, data() { return { // 遮罩层 loading: true, // 显示搜索条件 showSearch: true, // 菜单表格树数据 menuList: [], // 菜单树选项 menuOptions: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 是否展开，默认全部折叠 isExpandAll: false, // 重新渲染表格状态 refreshTable: true, // 查询参数 queryParams: { menuName: undefined, visible: undefined }, // 表单参数 form: {}, // 表单校验 rules: { menuName: [ { required: true, message: "菜单名称不能为空", trigger: "blur" } ], orderNum: [ { required: true, message: "菜单顺序不能为空", trigger: "blur" } ], path: [ { required: true, message: "路由地址不能为空", trigger: "blur" } ] } } }, created() { this.getList() }, methods: { // 选择图标 selected(name) { this.form.icon = name }, /** 查询菜单列表 */ getList() { this.loading = true listMenu(this.queryParams).then(response => { this.menuList = this.handleTree(response.data, "menuId") this.loading = false }) }, /** 转换菜单数据结构 */ normalizer(node) { if (node.children && !node.children.length) { delete node.children } return { id: node.menuId, label: node.menuName, children: node.children } }, /** 查询菜单下拉树结构 */ getTreeselect() { listMenu().then(response => { this.menuOptions = [] const menu = { menuId: 0, menuName: '主类目', children: [] } menu.children = this.handleTree(response.data, "menuId") this.menuOptions.push(menu) }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { this.form = { menuId: undefined, parentId: 0, menuName: undefined, icon: undefined, menuType: "M", orderNum: undefined, isFrame: "1", isCache: "0", visible: "0", status: "0" } this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm") this.handleQuery() }, /** 新增按钮操作 */ handleAdd(row) { this.reset() this.getTreeselect() if (row != null && row.menuId) { this.form.parentId = row.menuId } else { this.form.parentId = 0 } this.open = true this.title = "添加菜单" }, /** 展开/折叠操作 */ toggleExpandAll() { this.refreshTable = false this.isExpandAll = !this.isExpandAll this.$nextTick(() => { this.refreshTable = true }) }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() this.getTreeselect() getMenu(row.menuId).then(response => { this.form = response.data this.open = true this.title = "修改菜单" }) }, /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.menuId != undefined) { updateMenu(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { addMenu(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() { return delMenu(row.menuId) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) } } } </script> 美化
09-24
</el-col> <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" >{{ isExpandAll ? '折叠全部' : '展开全部' }}</el-button> </el-col> ...
<template> <div class="app-container"> <!--物料类型数据 --> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> </div> <div class="head-container"> <el-tree :data="typeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick" /> </div> </el-col> <el-col :span="20" :xs="24"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable> <el-option v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value" /> </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="['mdm:typeAttr: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="['mdm:typeAttr: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="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleUrlUpdate" v-hasPermi="['mdm:mdmMaterialType:edit']" >编辑命名规则 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型名称" align="center" prop="typemgrName" width="140"/> <el-table-column label="类型编号" align="center" prop="typemgrNum" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数值最大值" align="center" prop="maxVal" width="120"/> <el-table-column label="数值最小值" align="center" prop="minVal" width="120"/> <el-table-column label="默认值" align="center" prop="defaultVal"/> <el-table-column label="合法值列表" align="center" prop="validList" width="120"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isNull"/> </template> </el-table-column> <el-table-column label="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/> <el-table-column label="URL地址" align="center" prop="href"/> <el-table-column label="是否可查询" align="center" prop="isQuery" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isQuery"/> </template> </el-table-column> <el-table-column label="是否表单显示" align="center" prop="isShowForm" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowForm"/> </template> </el-table-column> <el-table-column label="是否列表显示" align="center" prop="isShowList" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowList"/> </template> </el-table-column> <el-table-column label="是否只读" align="center" prop="isReadOnly"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isReadOnly"/> </template> </el-table-column> <el-table-column label="表单排序" align="center" prop="orderNum"/> <el-table-column label="是否支持排序" align="center" prop="sortFlag" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.sortFlag"/> </template> </el-table-column> <el-table-column label="数值是否有公差" align="center" prop="isTolerance" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isTolerance"/> </template> </el-table-column> <el-table-column label="正则表达式校验" align="center" prop="regularCheck" width="120"/> <el-table-column label="状态" align="center" prop="status"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_status_list" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220" fixed="right"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="eidtValid(scope.row)" v-hasPermi="['mdm:typeAttr: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" /> <!-- 添加或修改属性规则对话框 --> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body destroy-on-close> <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> <!-- 基本信息 --> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number"> <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <!-- <el-input v-model="form.typemgrId" placeholder="请输入类型ID" style="width: 240px"/>--> <treeselect v-model="form.typemgrId" :options="typeOptions" :show-count="true" placeholder="请选择物料类型" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 数值与文本配置 --> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数值最大值" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数值最大值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值最小值" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数值最小值" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认值" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 状态与布尔选项 --> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否可查询" prop="isQuery"> <el-select v-model="form.isQuery" placeholder="请选择是否可查询" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否列表显示" prop="isShowList"> <el-select v-model="form.isShowList" placeholder="请选择是否列表显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数值是否有公差" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 高级设置 --> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- <!– 枚举与校验 –> <el-row> <el-col :span="24"> <el-form-item label="合法值列表" prop="validList"> <!–<el-input v-model="form.validList" placeholder="请输入合法值列表" style="width: 240px"/>–> <el-table :data="validDataList" v-loading="validLoading" ref="validTable" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典标签" align="center" prop="dictLabel"> <template slot-scope="scope"> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span> <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> </template> </el-table-column> <el-table-column label="字典键值" align="center" prop="dictValue" /> </el-table> </el-form-item> </el-col> </el-row>--> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </el-col> </el-row> <!-- 合法值列表对话框 --> <el-dialog :title="validtitle" :visible.sync="validOpen" width="650px" append-to-body> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleValidAdd" v-hasPermi="['mdm:validlist:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="validsingle" @click="handleValidUpdate" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="validMultiple" @click="handleValidDeleteBtn" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </el-col> </el-row> <el-table v-loading="validTableLoading" :data="validlistList" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <!-- <el-table-column label="ID" align="center" prop="id" />--> <el-table-column label="合法值名称" align="center" prop="name"/> <el-table-column label="排序" align="center" prop="orderNum"/> <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="handleValidUpdate(scope.row)" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleValidDelete(scope.row)" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validSubmitForm">关 闭</el-button> <!-- <el-button @click="validCancel">取 消</el-button>--> </div> </el-dialog> <!-- 添加或修改合法值列表对话框 --> <el-dialog :title="validAddtitle" :visible.sync="validAddOpen" width="500px" append-to-body> <el-form ref="validform" :model="validform" :rules="validRules" label-width="80px"> <el-form-item label="合法值名称" prop="name" label-width="95px"> <el-input v-model="validform.name" placeholder="请输入合法值名称"/> </el-form-item> <el-form-item label="排序" prop="orderNum" label-width="95px"> <el-input v-model="validform.orderNum" placeholder="请输入排序"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validAddSubmitForm">确 定</el-button> <el-button @click="validAddCancel">取 消</el-button> </div> </el-dialog> <!-- 修改命名规则对话框--> <el-dialog title="修改命名规则" :visible.sync="openUrledit" width="500px" append-to-body> <el-form ref="urlform" :model="urlform" :rules="UrlEditrules" label-width="80px"> <el-form-item label="命名规则" prop="namingrule"> <el-input v-model="urlform.namingrule" placeholder="请输入命名规则" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitFormNamingrule">确 定</el-button> <el-button @click="cancelSubmitUrlEdit">取 消</el-button> </div> </el-dialog> </div> </template> <script> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import {treeselect} from "@/api/mdm/mdmMaterialType"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import {listData, getData, delData, addData, updateData} from "@/api/system/dict/data"; import {listValidlist, getValidlist, delValidlist, addValidlist, updateValidlist} from "@/api/mdm/validlist"; export default { name: "TypeAttr", dicts: ['mdm_common_flag_list', 'mdm_common_status_list', 'mdm_common_column_type'], components: {Treeselect}, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 属性规则表格数据 typeAttrList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, }, // 表单参数 form: {}, // 表单校验 rules: { number: [ {required: true, message: "编号不能为空", trigger: "blur"} ], name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], typemgrId: [ {required: true, message: "类型ID不能为空", trigger: "blur"} ], dataType: [ {required: true, message: "字段类型不能为空", trigger: "change"} ], }, validRules: { name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], }, defaultProps: { children: "children", label: "label" }, typeOptions: undefined, materiaTypelName: undefined, //合法值列表字典值 validDataList: undefined, validDataListTotal: undefined, validLoading: true, // treeselectOptions: [], selectedValues: [],// 存储当前选中的 dictValue 数组 isInitSelection: false, validtitle: "", validOpen: false, validform: {}, // 合法值列表表格数据 validlistList: [], validTableLoading: true, validAddOpen: false, validAddtitle: "", //选中的属性ID selectedAttrId: null, //选中的属性行 selectedAttrRow: null, validIds: [], validMultiple: true, validsingle: false, openUrledit:false, urlform:{}, UrlEditrules:{} }; }, watch: { // 根据名称筛选部门树 materiaTypelName(val) { this.$refs.tree.filter(val); } }, created() { this.getList(); this.getTreeselect() }, methods: { /** 查询属性规则列表 */ getList() { this.loading = true; listTypeAttr(this.queryParams).then(response => { this.typeAttrList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("form"); }, resetRrlform(){ this.urlform ={ id: null, number: null, name: null, parentId: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null, icon: null, namingrule: null } this.resetForm("urlform"); }, /** 搜索按钮操作 */ 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.getTreeselect(); this.open = true; this.title = "添加属性规则"; // this.getValidList() }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getTypeAttr(id).then(response => { this.form = response.data; // this.form = {}; // this.$set(this, 'form', response.data); // 强制设置响应式 console.log("点击修改按钮后:") console.log(this.form.validList) this.open = true; this.title = "修改属性规则"; // this.getValidList(); // this.$nextTick().then(() => { // this.initDefaultSelection() // }) }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateTypeAttr(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addTypeAttr(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除属性规则编号为"' + ids + '"的数据项？').then(function () { return delTypeAttr(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('mdm/typeAttr/export', { ...this.queryParams }, `typeAttr_${new Date().getTime()}.xlsx`) }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { this.queryParams.typemgrId = data.id; this.handleQuery(); }, /** 查询物料类型树结构 */ getTreeselect() { treeselect().then(response => { const originalData = response.data; this.typeOptions = response.data; }); }, /** 查询字典数据列表 */ getValidList() { console.log("进入字典初始化") this.validLoading = true; const query = { pageNum: 1, pageSize: 1000, dictType: "mdm_validlist_dict", } listData(query).then(response => { this.validDataList = response.rows; this.validDataListTotal = response.total; // 数据加载完成后使用 nextTick 确保 DOM 已渲染表格 this.$nextTick(() => { this.initDefaultSelection(); // 安全地初始化选中 }); this.validLoading = false; }); }, initDefaultSelection() { this.isInitSelection = true; if (this.form.validList == null) { return } const table = this.$refs.validTable; const selectedArray = this.form.validList.split(','); console.log("初始化字典数据："); console.log(selectedArray); // 根据唯一标识（如 dictCode）查找要选中的行 // 遍历数据，匹配需要默认选中的行 this.selectedValues = []; this.validDataList.forEach(row => { if (selectedArray.includes(row.dictValue)) { table.toggleRowSelection(row, true); this.selectedValues.push(row.dictValue); } }); // 初始化完成后恢复标志位 this.$nextTick(() => { this.isInitSelection = false; }); }, // handleValidSelectionChange(selection) { // console.log("进入选中方法"); // if (this.isInitSelection) { // return; // } // console.log("进入选中方法"); // // 更新选中项的 dictValue 到 selectedValues 并同步到 form.validList // this.selectedValues = selection.map(item => item.dictValue); // this.form.validList = this.selectedValues.join(','); // console.log("选中后："); // console.log(this.form.validList); // }, // 编辑合法值 handleValidUpdate(row) { this.resetValidAddForm() const id = row.id || this.validIds getValidlist(id).then(response => { this.validform = response.data; this.validAddOpen = true; this.title = "修改合法值列表"; }); }, //编辑合法值按钮 eidtValid(row) { this.selectedAttrRow = row this.getValidDataList(row); }, //获取合法值列表 getValidDataList(row) { this.validOpen = true; this.title = "编辑合法值"; this.validTableLoading = true; const query = { pageNum: 1, pageSize: 1000, attributeId: row.id } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; this.validTableLoading = false; }); }, validSubmitForm() { this.validOpen = false; }, //新增合法值按钮操作 handleValidAdd() { this.validAddOpen = true; this.validAddtitle = "添加合法值"; this.resetValidAddForm(); }, //确定添加合法值按钮操作 validAddSubmitForm() { this.validform.attributeId = this.selectedAttrRow.id this.$refs["validform"].validate(valid => { if (valid) { if (this.validform.id != null) { updateValidlist(this.validform).then(response => { this.$modal.msgSuccess("修改成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } else { addValidlist(this.validform).then(response => { this.$modal.msgSuccess("新增成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } } }); // this.resetValidAddForm() }, validAddCancel() { this.validAddOpen = false; this.resetValidAddForm(); }, // 表单重置 resetValidAddForm() { this.validform = { id: null, attributeId: null, name: null, orderNum: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("validform"); }, /** 删除合法值按钮操作 */ handleValidDeleteBtn() { const ids = this.validIds; this.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataList(this.selectedAttrRow); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 删除单个合法值按钮操作 */ handleValidDelete(row) { const ids = row.id; this.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataListByAttrId(row.attributeId); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, //获取合法值列表 getValidDataListByAttrId(attrId) { const query = { pageNum: 1, pageSize: 1000, attributeId: attrId } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; // this.validTableLoading = false; }); }, // 多选框选中数据 handleValidSelectionChange(selection) { this.validIds = selection.map(item => item.id) this.validsingle = selection.length !== 1 this.validMultiple = !selection.length }, handleUrlUpdate(){ // 1. 获取当前选中的节点 const currentNode = this.$refs.tree.getCurrentNode(); // 2. 检查是否选中了有效节点 if (!currentNode) { this.$message.warning("请先在左侧树中选择一个物料类型"); return; } // 3. 重置表单 this.resetRrlform(); // 4. 使用节点ID请求数据 getMdmMaterialType(currentNode.id).then(response => { this.urlform = response.data; this.openUrledit = true; }); }, submitFormNamingrule(){ this.$refs["urlform"].validate(valid => { if (valid) { if (this.urlform.id != null) { updateMdmMaterialType(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.openUrledit = false; }); } } }); }, cancelSubmitUrlEdit(){ this.openUrledit = false; this.resetRrlform(); } } }; </script> 转为 vue3 语法
07-08
</el-col> <!-- 右侧属性表格 --> <el-col :span="20" :xs="24"> <!-- 搜索表单 --> <el-form :model="queryParams" ref="queryFormRef" size="small" :inline="true" v-show="showSearch" label-width="68px...
Element el-row与el-col
Snowden___的博客
02-20 4161
el-row和el-col组件是Element UI中实现栅格布局的重要工具。通过灵活使用这两个组件及其属性，可以创建出丰富多样的布局效果。同时，Element UI还支持响应式设计，使得布局能够自适应不同的屏幕尺寸。希望本文能够帮助开发者更好地掌握Element UI的布局技巧，提升开发效率。
el-row和el-col布局优化网页结构
su_yun的博客
05-30 5876
el-row是一个用于布局的容器，它可以包含一到多个el-col，并且可以通过属性自由控制el-col的数量和宽度。在本文中，我们将通过介绍el-row和el-col的使用方法、常用属性和示例，带您深入了解如何使用el-row和el-col布局优化网页结构。在上述代码中，我们使用了一个container容器，使用el-row和el-col来分别实现头部、侧边栏、正文和底部四个部分。使用el-row和el-col布局非常简单，我们只需要引入它们，然后在Vue的template中使用即可。
Element UI组件中el-col、el-row布局学习笔记
qq_56715703的博客
07-11 3万+
el-col：列。是Element UI布局中的核心组件，他的作用的将一行分成24个网格，为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。el-row：行。包裹在el-col外层，其中可以有无数个el-col。在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。二、el-row的属性：:gutter 调整布局之间的宽度---分栏间隔。（也就是两列之间的间隔距离）如果两个div间需要间隔以示区分。
el-row和el-col在element ui中的注意点
Frank_colo的博客
10-13 1822
el-row中写el-col，el-col代表的是列，写几个el-col就表示有几列。列的宽度用span来规定。表示你这列占这一行24份中的几份。不管el-row里嵌套多少el-row,el-row都代表24份。el-row是将一行分成24份。
Element-Plus el-col、el-row快速布局
白瑕 的博客
05-11 4万+
一篇博客学会el-col布局工具的使用
更改上下两个el-input 之间的距离
qq_44716001的博客
06-19 2526
【代码】更改上下两个el-input 之间的距离。
VUE里修改element-ui的显示层次与上下间隔
宁波阿成的博客
09-27 7781
VUE里修改element-ui的显示层次与上下间隔 审批意见没有填写的时候出现提示框跑到后面去了，同时页面的提示信息上下与附件间隔太小
组件Element的入门学习
起小点
03-09 5595
组件Element的入门学习 第一节：Layout布局 基础默认一行24列，通过自己简单的布局可以实现想要的效果 基础布局 注意;通过 row 和 col 组件，并通过 col 组件的 span 属性就可以实现我们简单的布局。 1.默认一列24行 &amp;lt;el-row&amp;gt; &amp;lt;el-col :span=&quot;24&quot;&amp;gt;&amp;lt;div class=&quot;grid-co
row以及col中的span属性
weixin_38225763的博客
03-01 3302
参考bootstrap的响应式，预设四个尺寸。属性调整方块的偏移位置（每次1格/24格）属性来调整布局之间的宽度—
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值