|
|
@@ -1,93 +1,125 @@
|
|
|
<template>
|
|
|
- <a-table :columns="layout" :data-source="data" :pagination="false" bordered class="ant-table-striped"
|
|
|
- :scroll="{ y: 'calc(100vh - 400px)' }" :customRow="customRow" :customHeaderRow="customHeaderRow"
|
|
|
- >
|
|
|
- <div slot="operation" slot-scope="text,record">
|
|
|
- <slot name="opreation" :data="record"></slot>
|
|
|
- </div>
|
|
|
- </a-table>
|
|
|
+ <a-table
|
|
|
+ :columns="layout"
|
|
|
+ :data-source="data"
|
|
|
+ :pagination="false"
|
|
|
+ bordered
|
|
|
+ class="ant-table-striped"
|
|
|
+ :scroll="{ y: 'calc(100vh - 400px)' }"
|
|
|
+ :customRow="customRow"
|
|
|
+ :customHeaderRow="customHeaderRow"
|
|
|
+ >
|
|
|
+ <div slot="value" slot-scope="text, record">
|
|
|
+ {{ $t(text) }}
|
|
|
+ </div>
|
|
|
+ <div slot="remarks" slot-scope="text, record">
|
|
|
+ {{ $t(text) }}
|
|
|
+ </div>
|
|
|
+ <div slot="operation" slot-scope="text, record">
|
|
|
+ <slot name="opreation" :data="record"></slot>
|
|
|
+ </div>
|
|
|
+ </a-table>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import './table.css'
|
|
|
+import "./table.css";
|
|
|
export default {
|
|
|
- props:['layout','data','custom','height','fixedName','width','checkbox','redirect','customHeader','requence','scrollY','rowKey','param'],
|
|
|
- data () {
|
|
|
+ props: [
|
|
|
+ "layout",
|
|
|
+ "data",
|
|
|
+ "custom",
|
|
|
+ "height",
|
|
|
+ "fixedName",
|
|
|
+ "width",
|
|
|
+ "checkbox",
|
|
|
+ "redirect",
|
|
|
+ "customHeader",
|
|
|
+ "requence",
|
|
|
+ "scrollY",
|
|
|
+ "rowKey",
|
|
|
+ "param",
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
return {
|
|
|
- sourceObj:{},
|
|
|
- targetObj:{},
|
|
|
- }
|
|
|
+ sourceObj: {},
|
|
|
+ targetObj: {},
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
- customHeaderRow (column) {
|
|
|
+ customHeaderRow(column) {
|
|
|
console.log(column);
|
|
|
- column.forEach((e,index) => {
|
|
|
- column[index].className = 'customHeader'
|
|
|
- })
|
|
|
+ column.forEach((e, index) => {
|
|
|
+ column[index].className = "customHeader";
|
|
|
+ });
|
|
|
},
|
|
|
- customRow (record, index) {
|
|
|
- return {
|
|
|
- domProps: {
|
|
|
- draggable: true
|
|
|
+ customRow(record, index) {
|
|
|
+ return {
|
|
|
+ domProps: {
|
|
|
+ draggable: true,
|
|
|
},
|
|
|
style: {
|
|
|
- cursor: 'move'
|
|
|
+ cursor: "move",
|
|
|
},
|
|
|
on: {
|
|
|
// 鼠标移入
|
|
|
- mouseenter: event => {
|
|
|
- var ev = event || window.event // 兼容IE
|
|
|
- ev.target.draggable = true
|
|
|
+ mouseenter: (event) => {
|
|
|
+ var ev = event || window.event; // 兼容IE
|
|
|
+ ev.target.draggable = true;
|
|
|
},
|
|
|
// 开始拖拽
|
|
|
- dragstart: event => {
|
|
|
- var ev = event || window.event
|
|
|
- ev.stopPropagation() // 阻止冒泡
|
|
|
- this.sourceObj = record // 得到源目标数据序号
|
|
|
+ dragstart: (event) => {
|
|
|
+ var ev = event || window.event;
|
|
|
+ ev.stopPropagation(); // 阻止冒泡
|
|
|
+ this.sourceObj = record; // 得到源目标数据序号
|
|
|
},
|
|
|
// 拖动元素经过的元素
|
|
|
- dragover: event => {
|
|
|
- var ev = event || window.event
|
|
|
- ev.preventDefault()
|
|
|
+ dragover: (event) => {
|
|
|
+ var ev = event || window.event;
|
|
|
+ ev.preventDefault();
|
|
|
},
|
|
|
- // 鼠标松开
|
|
|
- drop: async event => {
|
|
|
- // 兼容IE
|
|
|
- var ev = event || window.event;
|
|
|
- // 阻止冒泡
|
|
|
- ev.stopPropagation();
|
|
|
- // 得到目标数据
|
|
|
- this.targetObj = record;
|
|
|
- const tempDta = this.data;
|
|
|
- let source
|
|
|
- let target
|
|
|
- tempDta.forEach((item, index) => {
|
|
|
- item.weight = index;
|
|
|
- if (this.sourceObj[this.rowKey] == item[this.rowKey]) source = item
|
|
|
- if (this.targetObj[this.rowKey] == item[this.rowKey]) target = item
|
|
|
- });
|
|
|
- this.$set(tempDta,this.targetObj.weight,this.sourceObj)
|
|
|
- this.$set(tempDta,this.sourceObj.weight,this.targetObj)
|
|
|
-
|
|
|
- let res = await this.$api.requested({
|
|
|
- "id": "20221201134901",
|
|
|
- "content": {
|
|
|
- "ownertable": 'sys_optiontypemx',
|
|
|
- "sequencesorts": tempDta.map((v,i) => {
|
|
|
- return {
|
|
|
- "ownerid": v[this.rowKey],
|
|
|
- "sequence": this.param.content.pageSize * (this.param.content.pageNumber - 1) + i+1
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ // 鼠标松开
|
|
|
+ drop: async (event) => {
|
|
|
+ // 兼容IE
|
|
|
+ var ev = event || window.event;
|
|
|
+ // 阻止冒泡
|
|
|
+ ev.stopPropagation();
|
|
|
+ // 得到目标数据
|
|
|
+ this.targetObj = record;
|
|
|
+ const tempDta = this.data;
|
|
|
+ let source;
|
|
|
+ let target;
|
|
|
+ tempDta.forEach((item, index) => {
|
|
|
+ item.weight = index;
|
|
|
+ if (this.sourceObj[this.rowKey] == item[this.rowKey])
|
|
|
+ source = item;
|
|
|
+ if (this.targetObj[this.rowKey] == item[this.rowKey])
|
|
|
+ target = item;
|
|
|
+ });
|
|
|
+ this.$set(tempDta, this.targetObj.weight, this.sourceObj);
|
|
|
+ this.$set(tempDta, this.sourceObj.weight, this.targetObj);
|
|
|
+
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ id: "20221201134901",
|
|
|
+ content: {
|
|
|
+ ownertable: "sys_optiontypemx",
|
|
|
+ sequencesorts: tempDta.map((v, i) => {
|
|
|
+ return {
|
|
|
+ ownerid: v[this.rowKey],
|
|
|
+ sequence:
|
|
|
+ this.param.content.pageSize *
|
|
|
+ (this.param.content.pageNumber - 1) +
|
|
|
+ i +
|
|
|
+ 1,
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -99,11 +131,18 @@ export default {
|
|
|
font-size: 14px !important;
|
|
|
color: rgb(96, 98, 102) !important;
|
|
|
}
|
|
|
-/deep/.ant-table-row-cell-break-word{
|
|
|
+/deep/.ant-table-row-cell-break-word {
|
|
|
font-size: 12px !important;
|
|
|
padding: 10px 10px !important;
|
|
|
}
|
|
|
-/deep/.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,/deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
|
|
|
- background:#f5f7fa !important;
|
|
|
+/deep/.ant-table-tbody
|
|
|
+ > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(
|
|
|
+ .ant-table-row-selected
|
|
|
+ )
|
|
|
+ > td,
|
|
|
+/deep/.ant-table-tbody
|
|
|
+ > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
|
|
|
+ > td {
|
|
|
+ background: #f5f7fa !important;
|
|
|
}
|
|
|
</style>
|
