Skip to content

F
founder_vue
Commit 5910db7c by li_hongchao
Options

FPTX导入 ui调整

parent 15474a0f
Showing with 186 additions and 151 deletions
src/views/drFPTX/Index.vue
......@@ -89,11 +89,11 @@
FPTX的条码号
</div>
<el-table
height="37rem"
:border="false"
height="33rem"
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
style="width: 100%;"
row-key="pid"
:tree-props="{children: 'sonBarcode', hasChildren: 'hasChildren'}"
@expand-change="hadnlExpandChange1"
......@@ -191,10 +191,10 @@
需要导入的条码号
</div>
<el-table
height="33rem"
ref='reftable1'
height="37rem"
:data="selectArr"
style="width: 100%"
style="width: 100%;"
row-key="pid"
:tree-props="{children: 'sonBarcode'}"
@selection-change="checkRightAll"
......@@ -292,10 +292,10 @@
FPTX的条码号
</div>
<el-table
height='33rem'
height="37rem"
:data="datas"
@selection-change="checkAll1"
style="width: 100%"
style="width: 100%;"
>
<el-table-column
type="selection"
......@@ -377,11 +377,11 @@
需要导入的条码号
</div>
<el-table
height="33rem"
ref='reftable2'
height="37rem"
:data="selectArr"
@selection-change="checkRightAll"
style="width: 100%"
style="width: 100%;"
>
<el-table-column
type="selection"
......@@ -524,12 +524,12 @@
<script>
import '@/icons/tree_f.svg'
import '@/icons/tree_c.svg'
export default {
name: 'drFPTX',
components: {},
mounted () {
},
data () {
mounted() {},
data() {
return {
successCount: 0, // 成功条数
failCount: 0, // 失败条数
......@@ -584,7 +584,7 @@ export default {
ltSize: 50,
}
},
created () {
created() {
let w1 = 1920
let w2 = window.innerWidth
......@@ -593,7 +593,7 @@ export default {
this.fptxWidth3 = this.fptxWidth3 * w2 / w1
},
watch: {
drlx (newValue, oldValue) {
drlx(newValue, oldValue) {
if (newValue == 3) {
this.targetHead = '人员逻辑分库'
this.targets = this.$store.state.ljk.targetOptions_ry
......@@ -641,7 +641,7 @@ export default {
},
methods: {
// 展开或关闭行
hadnlExpandChange1 (row, expanded) {
hadnlExpandChange1(row, expanded) {
// console.log(row, expanded, "zhankaiguanbi")
// 获取下标
var i = this.datas.findIndex((table) => table.wjxh === row.wjxh)
......@@ -681,7 +681,7 @@ export default {
}
},
// 展开或关闭行
hadnlExpandChange2 (row, expanded) {
hadnlExpandChange2(row, expanded) {
// console.log(row, expanded, "zhankaiguanbi")
// 获取下标
var i = this.selectArr.findIndex((table) => table.wjxh === row.wjxh)
......@@ -721,18 +721,18 @@ export default {
}
},
// 判断能不能选择
checkSelectable (row) {
checkSelectable(row) {
return row.sonBarcode
},
// 导入成功,跳转详情
goList () {
goList() {
if (this.drlx == 3) {
this.selectArr = [] // 右边列表
this.datas = []// 左边表格数据项
this.nowSelectData = [] // 左边选中列表数据
this.nowSelectRightData = [] // 右边选中列表数据
this.dialogVisible = false// 进度条弹窗
this.$bus.emit("isBlur", false);
this.$bus.emit('isBlur', false)
this.showProgress = true // 进度条（正在导入）
this.UploadPercent = 0
this.$store.commit('layout/delcachePageName', 'RAList')
......@@ -748,7 +748,7 @@ export default {
this.nowSelectData = [] // 左边选中列表数据
this.nowSelectRightData = [] // 右边选中列表数据
this.dialogVisible = false// 进度条弹窗
this.$bus.emit("isBlur", false);
this.$bus.emit('isBlur', false)
this.showProgress = true // 进度条（正在导入）
this.UploadPercent = 0
this.$store.commit('layout/delcachePageName', 'RAList')
......@@ -764,7 +764,7 @@ export default {
this.nowSelectData = [] // 左边选中列表数据
this.nowSelectRightData = [] // 右边选中列表数据
this.dialogVisible = false// 进度条弹窗
this.$bus.emit("isBlur", false);
this.$bus.emit('isBlur', false)
this.showProgress = true // 进度条（正在导入）
this.UploadPercent = 0
this.$store.commit('layout/delcachePageName', 'RAList')
......@@ -777,10 +777,10 @@ export default {
}
},
// 取消上传
abort () {
abort() {
// this.nowSelectRightData = []
this.dialogVisible = false
this.$bus.emit("isBlur", false);
this.$bus.emit('isBlur', false)
// this.cancel()
this.UploadPercent = 0
fHttp.cancel()
......@@ -789,11 +789,11 @@ export default {
},
// 上传进度
uploadProcess (event, file, fileList) {
uploadProcess(event, file, fileList) {
this.dialogVisible = true
},
// 获取文件列表
onChange (file, fileList) {
onChange(file, fileList) {
// console.log(file.raw, 2222233333)
// 重复文件过滤
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
......@@ -808,7 +808,7 @@ export default {
let newlist = fileList
for (let i = 0; i < fileList.length; i++) {
let fatherId = that.NumId
that.NumId = that.NumId + 1;
that.NumId = that.NumId + 1
let file = fileList[i].raw
// console.log(file.webkitRelativePath, 999)
// 读取文件
......@@ -1018,10 +1018,10 @@ export default {
}, 100)
},
// 提交前钩子函数
beforeUpload () {
beforeUpload() {
// //console.log('数据liebiao', this.$refs.upload.uploadFiles)
},
submitUpload () {
submitUpload() {
if (this.nowSelectRightData.length == 0) {
this.$message.error('请选择要上传的文件')
} else {
......@@ -1047,7 +1047,7 @@ export default {
},
// 上传文件函数
upload () {
upload() {
let that = this
// 创建一个空的FormData对象:
const formData = new FormData()
......@@ -1063,7 +1063,7 @@ export default {
formData.append('logicCaseList', this.logicCaseList)
}
this.dialogVisible = true
this.$bus.emit("isBlur", true);
this.$bus.emit('isBlur', true)
NetUtil.drFptx.upload(formData, this.drlx, (progressEvent) => {
that.UploadPercent = Number((((progressEvent.loaded / 10 * 10) / progressEvent.total) * 100).toFixed(2))
}).then(res => {
......@@ -1071,7 +1071,7 @@ export default {
if (this.drlx == 3 || this.drlx == 6) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
this.showProgress = false;
this.showProgress = false
this.checkedTargets = [1]
this.selectArr = [] // 右边列表
this.datas = []// 左边表格数据项
......@@ -1082,7 +1082,7 @@ export default {
} else if (this.drlx == 9) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
this.showProgress = false;
this.showProgress = false
this.selectArr = [] // 右边列表
......@@ -1094,29 +1094,29 @@ export default {
this.UploadPercent = 0
}
// this.$refs.upload.clearFiles()
this.showProgress = false;
this.showProgress = false
} else {
this.$message.error(res.data.message);
this.$message.error(res.data.message)
this.dialogVisible = false// 进度条弹窗
this.$bus.emit("isBlur", false);
this.$bus.emit('isBlur', false)
this.UploadPercent = 0
}
}).catch(() => {
this.$message.error('服务器异常')
this.showProgress = false;
this.showProgress = false
this.UploadPercent = 0
})
},
// 删除文件
handleRemove (file, fileList) {
handleRemove(file, fileList) {
//console.log(file, fileList);
},
// 点击文件列表
handlePreview (file) {
handlePreview(file) {
//console.log('上传文件', file);
},
// 上传成功
uploadSuccess (res) {
uploadSuccess(res) {
if (this.drlx == 3 || this.drlx == 6) {
this.successCount = res.ret.successCount
this.failCount = res.ret.failCount
......@@ -1128,14 +1128,14 @@ export default {
this.showProgress = false
},
// 选择上传文件
uploadFile () {
uploadFile() {
// this.$refs.file.dispatchEvent(new MouseEvent("click"));
this.$refs['upload'].$children[0].$refs.input.webkitdirectory = false
this.$refs['upload'].$children[0].$refs.input.accept = '.fptx'
this.$refs['upload'].$children[0].$refs.input.click()
},
// 上传文件夹
uploadFiles () {
uploadFiles() {
// //console.log(this.$refs['upload'].$children[0].$refs.input)
this.$refs['upload'].$children[0].$refs.input.webkitdirectory = true
this.$refs['upload'].$children[0].$refs.input.accept = '.fptx'
......@@ -1149,17 +1149,15 @@ export default {
//console.log(fileDic, 111222)
},
// 表格穿梭框
checkAll1 (val) {
checkAll1(val) {
this.nowSelectData = val
},
checkRightAll (val) {
checkRightAll(val) {
console.log('val111', val)
this.nowSelectRightData = val
},
// 选中
handelSelect () {
handelSelect() {
// let self = this
......@@ -1183,19 +1181,20 @@ export default {
// }
// this.checkRightAll(this.nowSelectData)
// this.nowSelectRightData.push(this.nowSelectData)
let isLt = 0;
let newArr = this.handleConcatArr(this.selectArr, this.nowSelectData);
let isLt = 0
let newArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
newArr.forEach((i) => {
isLt += i.size / 1024 / 1024;
isLt += i.size / 1024 / 1024
})
console.log(isLt, 222222222222222)
if (isLt > this.ltSize) {
setTimeout(() => {
this.$message.error(`导入的总文件大小不得超过${this.ltSize}M,当前总文件大小为${isLt.toFixed(2)}M`)
}, 10);
}, 10)
return
};
this.selectArr = newArr;
}
this.selectArr = newArr
if (this.drlx == 3 || this.drlx == 6) {
this.selectArr.filter((good) => {
this.$refs.reftable1.toggleAllSelection(good, true)
......@@ -1211,26 +1210,26 @@ export default {
this.nowSelectData = []
},
// 取消
handleRemoveSelect () {
handleRemoveSelect() {
this.datas = this.handleConcatArr(this.datas, this.nowSelectRightData)
this.handleRemoveTabList(this.nowSelectRightData, this.selectArr)
this.nowSelectRightData = []
},
handleConcatArr (selectArr, nowSelectData) {
handleConcatArr(selectArr, nowSelectData) {
var out = [];
var flag = true;
var out = []
var flag = true
for (var i = 0; i < nowSelectData.length; i++) {
flag = true;
flag = true
for (var j = 0; j < selectArr.length; j++) {
if (nowSelectData[i].name == selectArr[j].name) { // 如果数据能保证id和name一直配对，则可以少一个比较条件
flag = false;
flag = false
this.$message.success('重复文件已过滤！')
break;
break
}
}
if (flag) {
out.push(nowSelectData[i]);
out.push(nowSelectData[i])
}
}
......@@ -1245,7 +1244,7 @@ export default {
// arr = arr.concat(selectArr, nowSelectData)
// return arr
},
handleRemoveTabList (isNeedArr, originalArr) {
handleRemoveTabList(isNeedArr, originalArr) {
if (isNeedArr.length && originalArr.length) {
for (let i = 0; i < isNeedArr.length; i++) {
for (let k = 0; k < originalArr.length; k++) {
......@@ -1258,7 +1257,7 @@ export default {
},
},
filters: {
typeNum (val) {
typeNum(val) {
//console.log(val);
// if (!val) return;
const data = {
......@@ -1271,7 +1270,7 @@ export default {
}
},
computed: {
roleArr () {
roleArr() {
return this.$store.state.layout.Menu
}
},
......@@ -1280,7 +1279,7 @@ export default {
<!--table树-->
<style scoped lang="scss">
/deep/ .children-count {
/deep/ .children-count {
width: 34px;
font-size: 12px;
text-align: center;
......@@ -1290,25 +1289,25 @@ export default {
right: 10px;
top: 50%;
transform: translate(0, -50%);
}
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/*有子节点 且未展开*/
.el-table /deep/ .el-icon-arrow-right:before {
/*有子节点 且未展开*/
.el-table /deep/ .el-icon-arrow-right:before {
content: "";
display: block;
width: 11px;
height: 19px;
font-size: 16px;
background-size: 16px;
}
}
/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded {
/*有子节点 且已展开*/
.el-table /deep/ .el-table__expand-icon--expanded {
.el-icon-arrow-right:before {
content: "";
display: block;
......@@ -1317,10 +1316,10 @@ export default {
font-size: 18px;
background-size: 21px;
}
}
}
/*没有子节点*/
.el-tree
/*没有子节点*/
.el-tree
/deep/
.el-tree-node__expand-icon.is-leaf::before
.el-table
......@@ -1333,14 +1332,14 @@ export default {
height: 18px;
font-size: 16px;
background-size: 16px;
}
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover {
/deep/ .el-table--enable-row-hover .el-table__body tr:hover {
cursor: pointer;
}
}
</style>
<style lang="scss">
.el-table__expand-icon {
.el-table__expand-icon {
.el-icon-arrow-right {
cursor: pointer !important;
}
......@@ -1359,9 +1358,9 @@ export default {
background-position: center;
background-size: 11px;
background-repeat: no-repeat;
}
}
.el-table__expand-icon.el-table__expand-icon--expanded {
.el-table__expand-icon.el-table__expand-icon--expanded {
width: 11px;
height: 11px;
background-image: url("../../assets/img/confirm/shrink.png");
......@@ -1369,15 +1368,15 @@ export default {
background-size: 11px;
background-repeat: no-repeat;
transform: rotate(180deg) !important;
}
}
</style>
<style lang="scss" scoped>
// /deep/.el-dialog__wrapper {
// background: rgba($color: #fff, $alpha: 0.65);
// // filter: blur(2px);
// }
// /deep/.el-dialog__wrapper {
// background: rgba($color: #fff, $alpha: 0.65);
// // filter: blur(2px);
// }
/deep/ .el-dialog {
/deep/ .el-dialog {
margin-top: 30vh;
.el-button {
......@@ -1389,45 +1388,45 @@ export default {
.el-button:hover {
color: #055fe7;
}
}
}
/deep/ .el-dialog__header {
/deep/ .el-dialog__header {
display: none;
}
}
/deep/ .el-dialog__body {
/deep/ .el-dialog__body {
text-align: center;
}
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #055fe7;
border-color: #055fe7;
}
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
color: #333333;
}
}
/deep/ .el-table.el-table--fit.el-table--enable-row-hover {
height: 501px !important;
}
/*/deep/ .el-table.el-table--fit.el-table--enable-row-hover {*/
/* height: 37rem !important;*/
/*}*/
/deep/ .el-table__body-wrapper.is-scrolling-none {
height: 499px !important;
}
/*/deep/ .el-table__body-wrapper.is-scrolling-none {*/
/* height: 37rem !important;*/
/*}*/
.drFPTX {
.drFPTX {
padding: 25px;
}
}
.drlx .el-radio {
.drlx .el-radio {
width: 86px;
height: 32px;
line-height: 32px;
......@@ -1446,25 +1445,27 @@ export default {
/deep/ .el-radio__input.is-checked + .el-radio__label {
color: #ffffff;
}
}
}
/deep/ .drlx .is-checked {
/deep/ .drlx .is-checked {
background: #055fe7;
}
}
.drlx /deep/ .el-radio__input {
.drlx /deep/ .el-radio__input {
display: none;
}
}
.choose {
.choose {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
.chooseTip {
display: flex;
align-items: center;
}
.wjlx {
display: flex;
width: 609px;
......@@ -1473,12 +1474,14 @@ export default {
border-radius: 6px;
margin-top: 24px;
}
.tip {
margin-left: 24px;
margin-top: 24px;
color: #f8980a;
font-family: HarmonyOS_Sans_SC;
font-size: 14px;
span {
font-size: 14px;
margin-right: 5px;
......@@ -1522,9 +1525,11 @@ export default {
&:hover {
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.08) !important;
}
&:focus-within {
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.08) !important;
/deep/.el-input__inner {
/deep/ .el-input__inner {
color: #006aff !important;
}
}
......@@ -1533,15 +1538,17 @@ export default {
width: 282px;
height: 40px;
/deep/.el-input__inner {
/deep/ .el-input__inner {
border: none;
outline: none;
box-shadow: none;
&:focus {
box-shadow: none;
}
}
/deep/.el-input__inner:hover {
/deep/ .el-input__inner:hover {
box-shadow: none;
}
}
......@@ -1552,17 +1559,20 @@ export default {
background-color: #e6e6e8;
margin-right: 14px;
}
.text {
font-size: 14px;
font-family: HarmonyOS_Sans_SC;
color: #006aff;
cursor: pointer;
}
.text:hover {
color: #51b1f5;
}
}
/deep/.el-input__inner {
/deep/ .el-input__inner {
border: none;
}
}
......@@ -1575,34 +1585,34 @@ export default {
border-radius: 4px;
padding: 0;
}
}
}
.divider {
.divider {
width: 100%;
height: 1px;
background: #eeeeee;
margin: 20px 0;
}
}
.bottom {
.bottom {
display: flex;
.left {
display: flex;
height: 560px;
height: 650px;
width: 1392px;
.el-col {
.el-table {
// height: 550px;
// background-color: #111;
/deep/ .el-table {
/*height: 650px;*/
/*background-color: #111;*/
border-radius: 8px;
}
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
background: #F6F8FA;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
......@@ -1613,7 +1623,7 @@ export default {
div {
width: 4px;
height: 16px;
background: #055fe7;
background: #055FE7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
......@@ -1621,7 +1631,7 @@ export default {
}
/deep/ .el-table tr th {
background-color: #f6f8fa;
background-color: #ECF1F7;
font-size: 14px;
font-family: HarmonyOS_Sans_SC;
color: #282f3c;
......@@ -1637,7 +1647,7 @@ export default {
.opSetting {
text-align: center;
margin-top: 230px;
margin-top: 270px;
button {
width: 56px;
......@@ -1675,20 +1685,20 @@ export default {
}
.right {
height: 560px;
height: 656px;
width: 161px;
.target {
margin: 0 auto;
width: 137px;
height: 560px;
height: 656px;
border-radius: 6px;
border: 1px solid #d1d1d1;
.targetHead {
width: 135px;
height: 56px;
background: #f0f3f6;
background: #F6F8FA;
border-radius: 6px 6px 0px 0px;
line-height: 56px;
text-align: center;
......@@ -1702,10 +1712,9 @@ export default {
padding-top: 16px;
padding-left: 15px;
width: 100%;
height: 500px;
height: 596px;
border-radius: 6px;
// background-color: #111;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
......@@ -1715,11 +1724,13 @@ export default {
margin: 5px 0;
}
}
// 滚动条的宽度
/deep/ .targetBody::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .targetBody::-webkit-scrollbar-thumb {
background-color: #dadde0;
......@@ -1727,30 +1738,35 @@ export default {
}
}
}
}
.noselected {
}
.noselected {
background-color: #ecedf1 !important;
border: none;
color: #aeafb4;
margin-right: 10px;
}
.selected {
}
.selected {
background-color: #055fe7;
color: #ffffff;
margin-right: 10px;
&:hover {
background: #377fec;
}
&:active {
background: #044cb9;
}
}
.bdbottom {
}
.bdbottom {
display: flex;
.left {
display: flex;
height: 560px;
height: 656px;
width: 1240px;
margin-right: 14px;
......@@ -1758,7 +1774,7 @@ export default {
.head {
height: 56px;
width: 100%;
background: #f0f3f6;
background: #F6F8FA;
border-radius: 7px 7px 0px 0px;
display: flex;
align-items: center;
......@@ -1769,7 +1785,7 @@ export default {
div {
width: 4px;
height: 16px;
background: #055fe7;
background: #055FE7;
border-radius: 2px;
margin-left: 10px;
margin-right: 6px;
......@@ -1830,7 +1846,7 @@ export default {
}
.right {
height: 560px;
height: 656px;
width: 284px;
.head {
......@@ -1841,7 +1857,7 @@ export default {
height: 55px;
padding: 0 10px;
box-sizing: border-box;
background: #f0f3f6;
background: #ECF1F7;
border: 1px solid #d1d1d1;
border-bottom: none;
border-radius: 6px 6px 0px 0px;
......@@ -1849,18 +1865,19 @@ export default {
div {
width: 1px;
height: 30px;
background: #bfd1eb;
background: #055FE7;
}
}
.bottom {
width: 284px;
height: 500px;
height: 596px;
display: flex;
border-radius: 0 0 6px 6px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
border-top: none;
.targetLeft {
flex: 1;
padding-top: 16px;
......@@ -1877,11 +1894,13 @@ export default {
overflow: hidden;
}
}
// 滚动条的宽度
/deep/ .targetLeft::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .targetLeft::-webkit-scrollbar-thumb {
background-color: #dadde0;
......@@ -1900,6 +1919,7 @@ export default {
padding-top: 16px;
padding-left: 20px;
overflow: auto;
/deep/ .el-checkbox {
height: 22px;
font-size: 14px;
......@@ -1910,11 +1930,13 @@ export default {
overflow: hidden;
}
}
// 滚动条的宽度
/deep/ .targetRight::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .targetRight::-webkit-scrollbar-thumb {
background-color: #dadde0;
......@@ -1922,6 +1944,20 @@ export default {
}
}
}
}
// @import "@/assets/css/globalBase.scss";
}
// 滚动条的宽度
/deep/ ::-webkit-scrollbar {
width: 3px; // 横向滚动条
height: 3px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ ::-webkit-scrollbar-thumb {
background-color: #dadde0;
border-radius: 3px;
}
// @import "@/assets/css/globalBase.scss";
</style>
src/views/xtfkgl/XtfkAndGzlView.vue
......@@ -641,4 +641,3 @@ export default {
-moz-osx-font-smoothing: grayscale;
}
</style>
l l
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment