<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-30 11:01:54
-->
<template>
<div>
<el-table
:data="tableDataList"
border
:pagination="false"
:key="key"
:header-cell-style="{ 'text-align': 'center' }"
:heightNumSetting="true"
:minHeight="150"
height="150"
style="width: 100%"
>
<el-table-column prop="index" width="50" :render-header="renderHeader">
<template slot-scope="scope">
<i
class="el-icon-minus pointer"
@click="deleClick(scope.$index, scope.row)"
v-if="ableOperation"
></i>
<div style="text-align: center" v-else>
{{ scope.$index + 1 }}
</div>
</template>
</el-table-column>
<el-table-column prop="yt" label="土地用途" min-width="100">
<template slot-scope="scope">
<treeselect
v-model="scope.row.yt"
:disabled="!ableOperation"
noOptionsText="暂无数据"
placeholder=""
:show-count="true"
:options="dictData['tdyt']"
:normalizer="normalizer"
:appendToBody="true"
z-index="9999"
@input="addrow(scope.row)"
/>
</template>
</el-table-column>
<el-table-column prop="qssj" label="土地使用起始时间" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.qssj"
type="date"
:disabled="!ableOperation"
:picker-options="scope.row.pickerStart"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
@input="startTime(scope.$index)"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="jssj" label="土地使用结束时间" min-width="100">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.jssj"
type="date"
:disabled="!ableOperation"
:picker-options="scope.row.pickerEnd"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
@input="endTime(scope.$index)"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="tdsyqx" label="土地使用期限" min-width="100">
<template slot-scope="scope">
<el-input
class="item"
:disabled="!ableOperation"
v-model="scope.row.tdsyqx"
oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
placeholder="请输入内容"
@input="sumTime(scope.$index, scope.row.tdsyqx)"
>
></el-input
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["dictData"]),
},
props: {
tableData: {
type: Array,
default: function () {
return [];
},
},
ableOperation: {
type: Boolean,
default: true,
},
},
data() {
return {
// 键名转换，方法默认是label和children进行树状渲染
key: 0,
newdata: {
yt: null,
qssj: "",
jssj: "",
tdsyqx: "",
},
tableDataList: [],
// 起始时间选择范围
pickerStart: {},
pickerEnd: {},
normalizer(node) {
if (node.children == null || node.children == "null") {
delete node.children;
}
return {
id: node.dcode,
label: node.dname,
children: node.children,
};
},
};
},
mounted() {},
watch: {
tableData: {
handler: function (val, oldVal) {
let that = this;
this.$nextTick(() => {
if (!val || val.length == 0) {
that.tableDataList = _.cloneDeep([
{
yt: null,
qssj: "",
jssj: "",
tdsyqx: "",
},
]);
} else {
that.tableDataList = _.cloneDeep(val);
}
});
},
immediate: true,
deep: true,
},
},
methods: {
/**
* @description: renderHeader
* @author: renchao
*/
renderHeader() {
return (
<div>
{" "}
{!this.ableOperation ? (
"序号"
) : (
<i
class="el-icon-plus pointer"
onClick={() => {
this.addClick();
}}
></i>
)}
</div>
);
},
// 修改事件
/**
* @description: 修改事件
* @author: renchao
*/
addrow(a) {
console.log(a);
// this.tableDataList = this.tableDataList.map((item) => {
// return {
// ...item,
// yt: a.yt,
// };
// });
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: startTime
* @param {*} index
* @author: renchao
*/
startTime(index) {
console.log("index", index);
// let startTime = this.tableDataList[index].tdsyqssj;
let endTime = this.tableDataList[index].jssj;
let startTime = this.tableDataList[index].qssj;
this.tableDataList[index].pickerEnd = {
disabledDate: (time) => {
if (Object.keys(startTime).length > 0) {
return new Date(startTime).getTime() > time.getTime();
} else {
return time.getTime() < Date.now();
}
},
};
if (startTime && endTime) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
this.tableDataList[index].tdsyqx = endYear - startYear;
}
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: endTime
* @param {*} index
* @author: renchao
*/
endTime(index) {
// let startTime = this.tableDataList[index].tdsyqssj;
let startTime = this.tableDataList[index].qssj;
let endTime = this.tableDataList[index].jssj;
this.tableDataList[index].pickerStart = {
disabledDate: (time) => {
if (Object.keys(endTime).length > 0) {
return new Date(endTime).getTime() < time.getTime();
} else {
return time.getTime() > Date.now();
}
},
};
if (startTime && endTime) {
let startYear = new Date(startTime).getFullYear();
let endYear = new Date(endTime).getFullYear();
this.tableDataList[index].tdsyqx = endYear - startYear;
}
this.$emit("upDateTdytxxList", this.tableDataList);
},
/**
* @description: sumTime
* @param {*} index
* @param {*} tdsyqx
* @author: renchao
*/
sumTime(index, tdsyqx) {
let startTime = this.tableDataList[index].qssj;
this.tableDataList[index].jssj =
Number(startTime.substring(0, 4)) +
Number(tdsyqx) +
startTime.slice(4, 19);
this.$emit("upDateTdytxxList", this.tableDataList);
},
// 新增
/**
* @description: 新增
* @author: renchao
*/
addClick() {
// this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);
this.tableDataList.push(_.cloneDeep(this.newdata))
this.$emit("upDateTdytxxList", this.tableDataList);
},
// 删除
/**
* @description: 删除
* @param {*} index
* @param {*} row
* @author: renchao
*/
deleClick(index, row) {
this.$confirm("确定要删除吗, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableDataList.splice(index, 1);
this.$emit("upDateTdytxxList", this.tableDataList);
})
.catch(() => {});
},
},
};
</script>
<style scoped lang="scss">
.el-input {
border: none !important;
}
/deep/.el-table__row {
border: none !important;
}
.el-date-editor.el-input {
width: 100%;
}
/deep/.el-table th {
height: 30px !important;
}
/deep/ .el-table--border .el-table__cell:first-child .cell{
text-align: center;
}
</style>