Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
d997e4e1 1 parent d5c665a3

组件参数修正，样式修改，文本域限制长度

Expand all
Inline Side-by-side
Showing 8 changed files with 139 additions and 279 deletions
......@@ -4,6 +4,18 @@
*/
/** 基础通用 **/
.wid100 {
width: 100% !important;
}
.wid90 {
width: 90% !important;
}
.wid80 {
width: 80% !important;
}
.pt5 {
padding-top: 5px;
}
......@@ -103,7 +115,7 @@
.formItem {
width: 100%;
// max-width: 310px;
// max-width: 300px;
}
}
......
......@@ -189,3 +189,51 @@ aside {
.multiselect--active {
z-index: 1000 !important;
}
.el-table__body-wrapper {
&::-webkit-scrollbar {
height: 10px;
width: 10px;
}
&::-webkit-scrollbar-track {
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #409eff;
}
}
// 解决表格固定列问题
.el-table__fixed,
.el-table__fixed-right {
height: calc(100% - 7px) !important;
box-shadow: -5px -2px 10px rgba(0, 0, 0, .12) !important;
.el-table__fixed-body-wrapper {
height: calc(100% - 36px) !important;
}
}
// 当表格没有滚动条时
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
height: 100% !important;
bottom: 0 !important;
box-shadow: none !important;
}
// 当表格有纵向滚动条时
.el-table--scrollable-y .el-table__fixed-right {
right: 7px !important;
}
// 当表格只有横向滚动条，没有纵向滚动条时
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
right: 0 !important;
}
\ No newline at end of file
......
......@@ -36,20 +36,6 @@
background layout="prev, pager, next, jumper, ->, sizes, total" class="tablePagination" @size-change="sizeChange"
@next-click="nextClick" @prev-click="prevClick" @current-change="currentChange">
</el-pagination>
<!-- 表头控制 -->
<div class="tableInfo" v-if="infoShow">
<ul class="tableList" v-show="show">
<el-checkbox-group v-model="checkDisabled">
<li class="flexList" v-for="(item, index) in newHeader" :key="index" :title="item.name">
<div>
<el-checkbox :label="item.name" @change="newHeader[index].disabled = !item.disabled">{{ item.name }}
</el-checkbox>
</div>
</li>
</el-checkbox-group>
</ul>
<el-button type="primary" icon="el-icon-edit" size="medium" circle @click="show = !show"></el-button>
</div>
</div>
</template>
......@@ -175,10 +161,6 @@ export default {
type: Boolean,
default: false,
},
infoShow: {
type: Boolean,
default: true,
},
},
inheritAttrs: false,
data() {
......@@ -346,82 +328,13 @@ export default {
"div",
{
class: ["thead-cell"],
on: {
mousedown: ($event) => {
this.handleMouseDown($event, column);
},
mousemove: ($event) => {
this.handleMouseMove($event, column);
},
},
},
[
// 添加 <a> 用于显示表头 label
createElement("a", column.label),
// 添加一个空标签用于显示拖动动画
createElement("span", {
class: ["virtual"],
}),
createElement("div", column.label),
]
);
},
// 按下鼠标开始拖动
handleMouseDown(e, column) {
this.dragState.dragging = true;
this.dragState.start = parseInt(column.columnKey);
// 给拖动时的虚拟容器添加宽高
let table = document.getElementsByClassName("w-table")[0];
let virtual = document.getElementsByClassName("virtual");
for (let item of virtual) {
item.style.height = table.clientHeight - 1 + "px";
item.style.width = item.parentElement.parentElement.clientWidth + "px";
}
document.addEventListener("mouseup", this.handleMouseUp);
},
// 鼠标放开结束拖动
handleMouseUp() {
this.dragColumn(this.dragState);
// 初始化拖动状态
this.dragState = {
start: -9,
end: -9,
dragging: false,
direction: undefined,
};
document.removeEventListener("mouseup", this.handleMouseUp);
},
// 拖动中
handleMouseMove(e, column) {
if (this.dragState.dragging) {
let index = parseInt(column.columnKey); // 记录起始列
if (index - this.dragState.start !== 0) {
this.dragState.direction =
index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向
this.dragState.end = parseInt(column.columnKey);
} else {
this.dragState.direction = undefined;
}
} else {
return false;
}
},
// 拖动易位
dragColumn({ start, end, direction }) {
let tempData = [];
let left = direction === "left";
let min = left ? end : start - 1;
let max = left ? start + 1 : end;
for (let i = 0; i < this.newHeader.length; i++) {
if (i === end) {
tempData.push(this.newHeader[start]);
} else if (i > min && i < max) {
tempData.push(this.newHeader[left ? i - 1 : i + 1]);
} else {
tempData.push(this.newHeader[i]);
}
}
this.newHeader = tempData;
},
headerCellClassName({ column, columnIndex }) {
let active =
columnIndex - 1 === this.dragState.end
......@@ -467,31 +380,6 @@ export default {
.el-table th {
padding: 0;
.virtual {
position: absolute;
display: block;
width: 0;
height: 0;
top: 0px;
left: 0px;
background: none;
border: none;
}
&.darg_active_left {
.virtual {
border-left: 2px dotted #666;
z-index: 99;
}
}
&.darg_active_right {
.virtual {
border-right: 2px dotted #666;
z-index: 99;
}
}
}
.thead-cell {
......
......@@ -46,8 +46,8 @@
</el-col>
<el-col :span="6">
<el-form-item label="运单号">
<el-input class="formItem" type="textarea" placeholder="请输入运单号（回车分割）" :rows="1" v-model="formData.waybillNo"
clearable></el-input>
<el-input class="formItem" type="textarea" placeholder="请输入运单号（回车分割）" :rows="1" :maxlength="12000"
v-model="formData.waybillNo" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -162,9 +162,8 @@
</el-form>
<Tables ref="newTables" ductName="cargo" :data="tableData" :headerData="tableHeader" :totalCount="totalCount"
:loading="loading" :selection="true" :limitSize="size" :limitStart="formData.limitStart" :page="page"
:shiftKey="shiftKey" :infoShow="false" :height="tableHeight" :pageSizes="[100]" @sizeChange="sizeChange"
@tableSelect="tableSelect" @tableSelectAll="tableSelectAll" @currentChange="currentChange"
@sortChange="sortChange"></Tables>
:shiftKey="shiftKey" :height="tableHeight" :pageSizes="[100]" @sizeChange="sizeChange" @tableSelect="tableSelect"
@tableSelectAll="tableSelectAll" @currentChange="currentChange" @sortChange="sortChange"></Tables>
<Dialog :tableData="tableSelection" :dialogVisible="dialogVisible" @dialogBeforeClose="dialogBeforeClose"></Dialog>
</div>
</template>
......
<template>
<div class="cargoPage">
<el-form ref="cargoForm" class="form-header" label-position="right" label-width="auto" size="small"
<el-form ref="cargoForm" class="form-header" label-position="right" label-width="auto" size="medium"
:model="formData">
<el-row type="flex" style="flexWrap: wrap !important">
<el-col :span="6">
......@@ -27,8 +27,8 @@
</el-col>
<el-col :span="6">
<el-form-item label="运单号">
<el-input type="textarea" v-model="formData.waybillNo" class="formItem" placeholder="请输入运单号（回车间隔）" :rows="1"
clearable></el-input>
<el-input ref='userInfo' type="textarea" v-model="formData.waybillNo" class="formItem"
placeholder="请输入运单号（回车间隔）" :rows="1" :maxlength="12000" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -156,8 +156,8 @@
</el-form>
<Tables ref="newTables" ductName="cargo" :data="tableData" :headerData="tableHeader" :infoData="tableHeader"
:selection="true" :order="true" :totalCount="totalCount" :loading="tableLoading" :limitSize="limitSize"
:limitStart="limitStart" :page="page" :shiftKey="shiftKey" :infoShow="false" :pageSizes="[100]"
:height="tableHeight" @sizeChange="sizeChange" @tableSelect="tableSelect" @tableSelectAll="tableSelectAll"
:limitStart="limitStart" :page="page" :shiftKey="shiftKey" :pageSizes="[100]" :height="tableHeight"
@sizeChange="sizeChange" @tableSelect="tableSelect" @tableSelectAll="tableSelectAll"
@currentChange="currentChange" @sortChange="sortChange"></Tables>
<el-dialog title="舱位释放结果" width="80%" :visible.sync="dialogVisible" :close-on-click-modal="false"
:show-close="false" :append-to-body="true">
......@@ -1029,7 +1029,7 @@ export default {
};
</script>
<style scoped>
<style lang="scss" scoped>
.tips {
display: inline-block;
color: #606266;
......
......@@ -4,24 +4,13 @@
<el-row :gutter="50">
<el-col :span="6">
<el-form-item label="角色名称">
<el-input
v-model="formData.name"
placeholder="请输入角色名称"
clearable
></el-input>
<el-input v-model="formData.name" placeholder="请输入角色名称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<el-date-picker
v-model="createTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
clearable
>
<el-date-picker v-model="createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable>
</el-date-picker>
</el-form-item>
</el-col>
......@@ -36,63 +25,31 @@
</el-row>
</el-form>
<div style="margin:20px">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
:loading="tableLoading"
@click="selectRoleList(0)"
>搜索</el-button
>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole" v-hasPermi="['system:role:add']"
>新增角色</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" :loading="tableLoading" @click="selectRoleList(0)">搜索
</el-button>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addRole" v-hasPermi="['system:role:add']">新增角色
</el-button>
</div>
<Tables
ductName="role"
:data="data"
:headerData="tableHeader"
:infoData="tableHeader"
:totalCount="total"
:limitSize="formData.size"
:page="formData.page"
:infoShow="false"
:pageSizes="[20,30,40,50]"
:loading="tableLoading"
height="600"
@sizeChange="sizeChange"
@currentChange="currentChange"
>
<Tables ductName="role" :data="data" :headerData="tableHeader" :infoData="tableHeader" :totalCount="total"
:limitSize="formData.size" :page="formData.page" :pageSizes="[20, 30, 40, 50]" :loading="tableLoading"
height="600" @sizeChange="sizeChange" @currentChange="currentChange">
<template slot="optionColumn">
<el-table-column header-align="center" align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="buttonClick(scope, 0)"
>查看</el-button
>
<el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']"
>修改</el-button
>
<el-button
:type="scope.row.valid == 1 ? 'warning' : 'primary'"
size="mini"
v-hasPermi="['system:role:openClose']"
@click="roleStatus(scope)"
>{{ scope.row.valid == 1 ? "停用" : "启用" }}</el-button
>
<el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']"
>删除角色</el-button
>
<el-button type="primary" size="mini" @click="buttonClick(scope, 0)">查看</el-button>
<el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:role:update']">修改
</el-button>
<el-button :type="scope.row.valid == 1 ? 'warning' : 'primary'" size="mini"
v-hasPermi="['system:role:openClose']" @click="roleStatus(scope)">{{ scope.row.valid == 1 ? "停用" : "启用" }}
</el-button>
<el-button type="danger" size="mini" @click="removeRole(scope)" v-hasPermi="['system:role:delete']">删除角色
</el-button>
</template>
</el-table-column>
</template>
</Tables>
<Drawer
:drawer="drawer"
:drawerTitle="drawerTitle"
:roleFormDisabled="roleFormDisabled"
:roleData="roleData"
@handleClose="handleClose"
></Drawer>
<Drawer :drawer="drawer" :drawerTitle="drawerTitle" :roleFormDisabled="roleFormDisabled" :roleData="roleData"
@handleClose="handleClose"></Drawer>
</div>
</template>
......@@ -105,7 +62,7 @@ import {
updateRoleStatus,
} from "@/api/system/user.js";
export default {
name:"RoleConfig",
name: "RoleConfig",
components: {
Drawer,
},
......@@ -127,7 +84,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "角色状态",
......@@ -135,7 +92,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "创建人",
......@@ -143,7 +100,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "创建时间",
......@@ -151,7 +108,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "修改时间",
......@@ -159,7 +116,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "备注",
......@@ -167,7 +124,7 @@ export default {
width: "400px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
], //表头数据
roleData: {}, //角色详情
......@@ -180,20 +137,20 @@ export default {
};
},
created() {
if(this.$store.state.tagsView.cachedViews.length == 0){
if (this.$store.state.tagsView.cachedViews.length == 0) {
this.selectRoleList();
}
},
activated(){
activated() {
this.selectRoleList();
},
deactivated(){
deactivated() {
this.data = []
},
methods: {
//角色列表
selectRoleList(val) {
if(val == 0){
if (val == 0) {
this.formData.page = 1
}
this.tableLoading = true;
......@@ -328,7 +285,7 @@ export default {
}
});
})
.catch(() => {});
.catch(() => { });
} else {
this.$message({
message: res.msg,
......@@ -347,7 +304,7 @@ export default {
this.formData.page = val.page;
this.selectRoleList();
},
sizeChange(val){
sizeChange(val) {
this.formData.size = val;
this.selectRoleList()
}
......
......@@ -4,20 +4,12 @@
<el-row :gutter="50">
<el-col :span="6">
<el-form-item label="用户姓名">
<el-input
placeholder="请输入用户名称"
v-model="formData.username"
clearable
></el-input>
<el-input placeholder="请输入用户名称" v-model="formData.username" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="手机号码">
<el-input
placeholder="请输入手机号码"
v-model="formData.phone"
clearable
></el-input>
<el-input placeholder="请输入手机号码" v-model="formData.phone" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
......@@ -31,70 +23,34 @@
</el-row>
</el-form>
<div style="margin:20px">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
:loading="loading"
@click="selectUser(0)"
>搜索</el-button
>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addUser" v-hasPermi="['system:user:add']"
>新增用户</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" :loading="loading" @click="selectUser(0)">搜索
</el-button>
<el-button type="primary" icon="el-icon-plus" size="mini" @click="addUser" v-hasPermi="['system:user:add']">新增用户
</el-button>
</div>
<Tables
ductName="user"
:data="data"
:headerData="tableHeader"
:limitSize="formData.size"
:totalCount="total"
:loading="loading"
:page="formData.page"
:infoShow="false"
:pageSizes="[20,30,40,50]"
height="600"
@sizeChange="sizeChange"
@currentChange="currentChange"
>
<Tables ductName="user" :data="data" :headerData="tableHeader" :limitSize="formData.size" :totalCount="total"
:loading="loading" :page="formData.page" :pageSizes="[20, 30, 40, 50]" height="600" @sizeChange="sizeChange"
@currentChange="currentChange">
<template slot="optionColumn">
<el-table-column
header-align="center"
align="center"
width="auto"
label="操作"
>
<el-table-column header-align="center" align="center" width="auto" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="buttonClick(scope, 0)"
>查看</el-button
>
<el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']"
>修改</el-button
>
<el-button type="primary" size="mini" @click="buttonClick(scope, 0)">查看</el-button>
<el-button type="primary" size="mini" @click="buttonClick(scope, 1)" v-hasPermi="['system:user:update']">修改
</el-button>
<!-- <el-button type="primary" size="mini" @click="passwordShow = !passwordShow"
>修改密码</el-button
> -->
<el-button
:type="scope.row.isValid == 1 ? 'warning' : 'primary'"
size="mini"
v-hasPermi="['system:user:openClose']"
@click="userStatus(scope)"
>{{ scope.row.isValid == 1 ? "停用" : "启用" }}</el-button
>
<el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']"
>删除用户</el-button
>
<el-button :type="scope.row.isValid == 1 ? 'warning' : 'primary'" size="mini"
v-hasPermi="['system:user:openClose']" @click="userStatus(scope)">{{ scope.row.isValid == 1 ? "停用" : "启用"
}}</el-button>
<el-button type="danger" size="mini" @click="removeUser(scope)" v-hasPermi="['system:user:delete']">删除用户
</el-button>
</template>
</el-table-column>
</template>
</Tables>
<Drawer
:drawer="drawer"
:drawerTitle="drawerTitle"
:userFormDisabled="userFormDisabled"
:userData="userData"
@handleClose="handleClose"
></Drawer>
<Drawer :drawer="drawer" :drawerTitle="drawerTitle" :userFormDisabled="userFormDisabled" :userData="userData"
@handleClose="handleClose"></Drawer>
<!-- <el-dialog
title="修改密码"
:visible.sync="passwordShow"
......@@ -154,7 +110,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "用户姓名",
......@@ -162,7 +118,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "所属口岸",
......@@ -170,7 +126,7 @@ export default {
width: "150px",
align: "center",
sortable: false,
disabled:true
disabled: true
},
{
name: "所属角色",
......@@ -178,7 +134,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "电子邮箱",
......@@ -186,7 +142,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "用户状态",
......@@ -194,7 +150,7 @@ export default {
width: "100px",
align: "center",
sorTable: false,
disabled:true,
disabled: true,
},
{
name: "修改时间",
......@@ -202,7 +158,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
{
name: "备注",
......@@ -210,7 +166,7 @@ export default {
width: "150px",
align: "center",
sorTable: false,
disabled:true
disabled: true
},
], //表头数据
userData: {}, //用户详情
......@@ -224,20 +180,20 @@ export default {
};
},
created() {
if(this.$store.state.tagsView.cachedViews.length == 0){
if (this.$store.state.tagsView.cachedViews.length == 0) {
this.selectUser();
}
},
activated(){
activated() {
this.selectUser();
},
deactivated(){
deactivated() {
this.data = []
},
methods: {
//用户列表
selectUser(val) {
if(val == 0){
if (val == 0) {
this.formData.page = 1
}
this.loading = true;
......@@ -270,7 +226,7 @@ export default {
if (res.code === 200) {
this.userData = res.data;
this.userData.portName
?this.userData.portName=this.userData.portName.split(",")
? this.userData.portName = this.userData.portName.split(",")
: '';
} else {
this.$message({
......@@ -376,7 +332,7 @@ export default {
this.selectUser();
},
sizeChange(val){
sizeChange(val) {
this.formData.size = val;
this.selectUser()
}
......