Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
443bf236 by renchao@pashanhoo.com
Options

style:配置登记簿打印字段

1 parent bac1a803
Inline Side-by-side
Showing 4 changed files with 71 additions and 109 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-19 16:04:58
* @LastEditTime: 2023-09-14 10:53:42
-->
<template>
<div>
......@@ -12,61 +12,48 @@
class="check"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>待选合集</el-checkbox
>
@change="handleCheckAllChange">待选合集</el-checkbox>
<div class="num">/</div>
</div>
<el-checkbox-group
class="concent"
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
@change="handleCheckedCitiesChange">
<el-checkbox
v-for="city in cities"
:label="city.name"
:key="city.name"
>{{ city.despriction }}({{ city.name }})</el-checkbox
>
:key="city.name">{{ city.despriction }}({{ city.name }})</el-checkbox>
</el-checkbox-group>
</div>
<div class="right">
<div class="header">
<el-button> 置顶 </el-button>
<el-button> 上移 </el-button>
<el-button> 下移 </el-button>
<el-button> 置底 </el-button>
</div>
<el-table
class="tablelist"
:data="datalist"
ref="listTable"
row-key="zd"
:key="key"
row-key="bsmMb"
:pagination="false"
:header-cell-style="{ 'text-align': 'center' }"
:heightNumSetting="true"
:minHeight="150"
height="590"
style="width: 100%"
>
style="width: 100%">
<el-table-column label="字段" prop="name" min-width="100">
</el-table-column>
<el-table-column
label="字段名称"
prop="desprictionor"
min-width="100"
>
min-width="100">
</el-table-column>
<el-table-column label="字段别名" min-width="100">
<template slot-scope="scope">
<el-input
v-model="scope.row.despriction"
placeholder="请输入内容"
@input="sumTime(scope.$index, scope.row.tdsyqx)"
>
></el-input
>
@input="sumTime(scope.$index, scope.row.tdsyqx)">
></el-input>
</template>
</el-table-column>
</el-table>
......@@ -80,18 +67,19 @@
</template>
<script>
import Sortable from "sortablejs";
import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
export default {
import Sortable from 'sortablejs'
import { getFieldList, getFieldListByQlxx, save } from "@/api/SysDjbFieldDO";
export default {
props: {
formData: {
type: Object,
default: () => {},
default: () => { },
},
},
data() {
data () {
return {
checkAll: false,
sortable: null,
checkedCities: [],
cities: [],
datalist: [],
......@@ -100,82 +88,53 @@ export default {
isIndeterminate: true,
};
},
mounted() {
this.generateData();
this.initSort();
mounted () {
this.generateData()
},
beforeDestroy() {
beforeDestroy () {
if (this.sortable) {
this.sortable.destroy();
}
},
watch: {
key: {
handler (newName, oldName) {
this.initSort()
}
}
},
methods: {
changeIndex(array, index1, index2) {
changeIndex (array, index1, index2) {
array[index1] = array.splice(index2, 1, array[index1])[0];
/** splice 会修改原来的数组 slice 不会 返回的是删除后的数据 所以 index2要删除的位置，删除1个数据 返回是index2的数据 然后最后一个参数是新增的数据为index的数据 */
},
initSort() {
this.datalist=[]
this.datalist =this.tablelist
initSort () {
const el = this.$refs.listTable.$el.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
this.sortable = Sortable.create(el, {
this.sortable = new Sortable(el, {
ghostClass: "sortable-ghost",
setData: function (dataTransfer) {
dataTransfer.setData("Text", "");
},
onEnd: (evt) => {
console.log("evt.oldIndex", evt.oldIndex);
console.log("evt.newIndex", evt.newIndex);
const targetRow = this.tablelist.splice(evt.oldIndex, 1)[0];
console.log("targetRow", targetRow);
// this.changeIndex(this.datalist,evt.newIndex,evt.oldIndex)
// console.log("this.datalist", this.datalist);
this.datalist.splice(evt.newIndex, 0, targetRow);
console.log();
this.$set(this.datalist,targetRow);
},
});
// 其他排序逻辑
// const targetRow = this.datalist.splice(evt.oldIndex, 1)[0]
// this.datalist.splice(evt.newIndex, 0, targetRow);
}
})
},
// initSort () {
// const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
// this.sortable =new Sortable(el, {
// onEnd: (evt) => { // 监听拖动结束事件
// console.log(this) // this是当前vue上下文
// console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
// console.log(evt.newIndex)
// const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
// this.datalist.splice(evt.newIndex, 0, currRow)
// }
// })
// },
// initSort(){
// let el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
// //设置配置
// let _this = this
// Sortable.create(el, {
// animation: 150,
// sort: true,
// // draggable: '.el-table__row', // 设置可拖拽行的类名(el-table自带的类名)
// forceFallback: true,
// onEnd({newIndex, oldIndex}) {
// let currRow = _this.datalist.splice(oldIndex, 1)[0];
// _this.datalist.splice(newIndex, 0, currRow);
// }
// })
// },
/**
* @description: 初始数据集
* @author: renchao
*/
generateData() {
generateData () {
let that = this
getFieldList({ qllx: this.formData.qllx }).then((res) => {
if (res.code === 200) {
let listss = res.result;
listss.forEach((item, index) => {
this.cities.push({
that.cities.push({
name: item.name,
despriction: item.despriction,
desprictionor: item.despriction,
......@@ -186,22 +145,25 @@ export default {
if (res.code === 200) {
let listss = res.result;
listss.forEach((item, index) => {
this.tablelist.push({
that.tablelist.push({
name: item.name,
despriction: item.despriction,
desprictionor: item.despriction,
});
this.datalist =this.tablelist
this.checkedCities.push(item.name);
});
that.$nextTick(() => {
that.datalist = this.tablelist
that.checkedCities.push(item.name);
})
})
that.initSort()
}
});
}
});
},
handleCheckAllChange(val) {
let checkedlist=[]
let orlist=[]
handleCheckAllChange (val) {
let checkedlist = []
let orlist = []
checkedlist = val ? this.cities : [];
this.isIndeterminate = false;
console.log("this.checkedCities", this.checkedCities);
......@@ -215,12 +177,13 @@ export default {
}
});
});
console.log("orlist",orlist);
this.checkedCities=orlist
this.checkedCities = orlist
this.tablelist = lists;
this.datalist =this.tablelist
this.datalist = this.tablelist
// 其他排序逻辑
this.initSort()
},
handleCheckedCitiesChange(value) {
handleCheckedCitiesChange (value) {
console.log("value", value, this.checkedCities);
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
......@@ -236,10 +199,11 @@ export default {
});
});
this.tablelist = lists;
this.datalist =this.tablelist
this.datalist = this.tablelist
// 其他排序逻辑
this.initSort()
},
submitForm() {
console.log("this.datalistdss", this.datalist);
submitForm () {
save(this.formData.bsmMb, this.datalist).then((res) => {
if (res.code == 200) {
this.$popupCacel();
......@@ -256,12 +220,12 @@ export default {
});
},
},
};
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
.fieldcheck {
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
.fieldcheck {
width: 100%;
height: 650px;
display: flex;
......@@ -317,10 +281,10 @@ export default {
height: 680px;
}
}
}
.btn {
}
.btn {
margin-top: 10px;
width: 100%;
text-align: center;
}
}
</style>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-04-11 13:53:12
* @LastEditTime: 2023-09-14 10:51:36
*/
import filter from '@/utils/filter.js'
let vm = null
......@@ -61,7 +61,7 @@ class data extends filter {
},
{
label: '操作',
width: '160',
width: '130',
render: (h, scope) => {
return (
<div>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-09 10:09:12
* @LastEditTime: 2023-09-14 10:02:08
-->
<template>
<div class="from-clues">
......@@ -89,8 +89,8 @@
editClick (row) {
this.$popupDialog("其他及附记模板", "system/qtjfjmb/components/editDialog", row, '60%')
},
djbdisposition(row){
this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdispositions", row, '60%')
djbdisposition (row) {
this.$popupDialog("配置登记簿打印字段", "system/qtjfjmb/components/djbdispositions", row, '70%')
}
}
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-13 17:08:53
* @LastEditTime: 2023-09-14 10:12:23
-->
<template>
<div class="clmlmx-box">
......@@ -141,7 +141,6 @@
mounted () {
this.initSort()
this.tableData = _.cloneDeep(this.formData.data)
console.log(this.formData.bsmCompany);
},
beforeDestroy () {
if (this.sortable) {
......@@ -185,7 +184,6 @@
* @author: renchao
*/
handleDelete (index, row) {
let that = this
this.$confirm('此操作将永久删除该 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......