|
@@ -0,0 +1,365 @@
|
|
|
+<template>
|
|
|
+ <div class="mis-pageBox">
|
|
|
+ <!-- 主页 -->
|
|
|
+ <el-container>
|
|
|
+ <el-header height="40px">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.searchText"
|
|
|
+ size="small"
|
|
|
+ style="width: 300px"
|
|
|
+ placeholder="输入关键字"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="clickQuery()"
|
|
|
+ />
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="clickQuery()"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="list-opCol">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="clickAdd()"
|
|
|
+ >添加</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="clickModify()"
|
|
|
+ :disabled="disabledModify"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="clickDelete()"
|
|
|
+ :disabled="disabledDelete"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <tfTable
|
|
|
+ :table-data="dataList"
|
|
|
+ :column="columns"
|
|
|
+ :for-id="false"
|
|
|
+ :pagination="false"
|
|
|
+ :currentpage="pageInfo.current"
|
|
|
+ :pagesize="pageInfo.size"
|
|
|
+ :total="pageInfo.tableTotal"
|
|
|
+ :border="true"
|
|
|
+ :multiple="true"
|
|
|
+ :fixed="true"
|
|
|
+ :isdelete="false"
|
|
|
+ :is-select="false"
|
|
|
+ :stripe="true"
|
|
|
+ @handleCurrentChange="handleCurrentChange"
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
+ @handleSelectionChange="handleSelectionChange"
|
|
|
+ @rowDblclick="showDetail"
|
|
|
+ @detail="showDetail"
|
|
|
+ />
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ <!-- 详情页 -->
|
|
|
+ <el-dialog
|
|
|
+ v-if="dialogVisible"
|
|
|
+ v-dialogDrag
|
|
|
+ top="20vh"
|
|
|
+ :title="dialogTitle"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="800px"
|
|
|
+ class="dialog"
|
|
|
+ >
|
|
|
+ <tfDetail :detailData="detailData" :editState="editState" ref="dForm" />
|
|
|
+ <template slot="footer">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ icon="el-icon-check"
|
|
|
+ @click="clickSave()"
|
|
|
+ v-if="!editState"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ <el-button type="warning" icon="el-icon-close" @click="clickCancel()"
|
|
|
+ >关 闭</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import "@/views/mis/common/assets/styles/misStyle.scss";
|
|
|
+import { DateHelper } from "@/views/mis/common/assets/scripts/utils.js";
|
|
|
+import { chargingUnit } from "@/views/mis/common/api/codingManagement.js";
|
|
|
+import tfTable from "@/views/mis/common/misTable/index.vue";
|
|
|
+import tfDetail from "./chargingUnit-form.vue";
|
|
|
+export default {
|
|
|
+ components: { tfTable, tfDetail },
|
|
|
+ props: ["data"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ /* ----- 主页 ----- */
|
|
|
+ queryParams: {
|
|
|
+ searchText: "",
|
|
|
+ },
|
|
|
+ disabledModify: true,
|
|
|
+ disabledDelete: true,
|
|
|
+ editType: true, //编辑类型,true:新增;false:修改
|
|
|
+ loading: false, // 控制表格查询时
|
|
|
+ pageInfo: {
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ tableTotal: 1,
|
|
|
+ "orders[0].asc": "true",
|
|
|
+ "orders[0].column": "gsbm",
|
|
|
+ }, // 分页数据
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ label: "代收公司编码",
|
|
|
+ prop: "gsbm",
|
|
|
+ align: "center",
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "代收公司名称",
|
|
|
+ prop: "gsmc",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "公司地址",
|
|
|
+ prop: "gsdz",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "联系电话",
|
|
|
+ prop: "lxdh",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "是否启用",
|
|
|
+ prop: "disabled",
|
|
|
+ align: "center",
|
|
|
+ formatter: function (row, column, cellValue, index) {
|
|
|
+ return cellValue == 1 ? "是" : "否";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "操作人员",
|
|
|
+ prop: "czryxm",
|
|
|
+ align: "center",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "操作时间",
|
|
|
+ prop: "czsj",
|
|
|
+ align: "center",
|
|
|
+ sortable: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataList: [], // 表格数据
|
|
|
+ selectionsData: [], // 表格选中数据
|
|
|
+ selectedRow: {}, //表格选中行
|
|
|
+
|
|
|
+ /* ----- 详情页 ----- */
|
|
|
+ dialogTitle: "新增",
|
|
|
+ editState: false, //编辑状态,true:禁用;false:启用
|
|
|
+ dialogVisible: false,
|
|
|
+ detailData: {
|
|
|
+ gsbm: undefined,
|
|
|
+ gsmc: undefined,
|
|
|
+ gsdz:undefined,
|
|
|
+ lxdh:undefined,
|
|
|
+ czsj: undefined,
|
|
|
+ disabled: undefined,
|
|
|
+ czryxm: undefined,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ selectionsData(value) {
|
|
|
+ this.disabledModify = this.selectionsData.length !== 1;
|
|
|
+ this.disabledDelete = this.selectionsData.length == 0;
|
|
|
+ },
|
|
|
+ dialogVisible(newVal, oldVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ this.resetDetailData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.bindList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* ----- 方法 ----- */
|
|
|
+ /**
|
|
|
+ * @description 绑定列表
|
|
|
+ */
|
|
|
+ bindList() {
|
|
|
+ // 追加分页参数
|
|
|
+ let params = Object.assign({}, this.pageInfo, this.queryParams);
|
|
|
+ this.dataList = [];
|
|
|
+ this.loading = true;
|
|
|
+ chargingUnit.query(params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code !== 1) {
|
|
|
+ this.$message.error("查询失败!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 数据总数
|
|
|
+ this.pageInfo.tableTotal = res.result.total;
|
|
|
+ this.dataList = res.result.records;
|
|
|
+ })
|
|
|
+ .catch((ex) => {
|
|
|
+ this.$message.error("查询失败!");
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetDetailData() {
|
|
|
+ // 表单数据
|
|
|
+ for (var key in this.detailData) {
|
|
|
+ //console.log("key值:" + key)
|
|
|
+ this.detailData[key] = undefined;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ add() {
|
|
|
+ let params = Object.assign({}, this.detailData);
|
|
|
+ params.czry = this.$store.state.user.userId;
|
|
|
+ params.czryxm = this.$store.state.user.realName;
|
|
|
+
|
|
|
+ chargingUnit.add(params).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.bindList();
|
|
|
+ this.$message.success("添加成功!");
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ modify() {
|
|
|
+ let params = Object.assign({}, this.detailData);
|
|
|
+ params.czry = this.$store.state.user.userId;
|
|
|
+ params.czryxm = this.$store.state.user.realName;
|
|
|
+ params.czsj = DateHelper.getNowFormatDate(true);
|
|
|
+
|
|
|
+ chargingUnit.modify(params).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.bindList();
|
|
|
+ this.$message.success("修改成功!");
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delete() {
|
|
|
+ const ids = this.selectionsData.map((item) => {
|
|
|
+ return item.code;
|
|
|
+ });
|
|
|
+
|
|
|
+ chargingUnit.delete({ ids: ids.join(",") }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.bindList();
|
|
|
+ this.$message.success("删除成功!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 显示详情
|
|
|
+ */
|
|
|
+ showDetail(data) {
|
|
|
+ this.selectedRow = data;
|
|
|
+ this.detailData = Object.assign({}, this.selectedRow);
|
|
|
+
|
|
|
+ this.dialogTitle = "查看";
|
|
|
+ this.editState = true;
|
|
|
+ this.dialogVisible = true; // 显示弹窗
|
|
|
+ },
|
|
|
+
|
|
|
+ /* ----- dom事件 ----- */
|
|
|
+ /**
|
|
|
+ * @description 查询
|
|
|
+ */
|
|
|
+ clickQuery() {
|
|
|
+ this.pageInfo.current = 1;
|
|
|
+ this.bindList();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 添加
|
|
|
+ */
|
|
|
+ clickAdd() {
|
|
|
+ this.detailData.czryxm = this.$store.state.user.realName;
|
|
|
+ this.detailData.czsj = DateHelper.getNowFormatDate(true);
|
|
|
+
|
|
|
+ this.editType = true;
|
|
|
+ this.dialogTitle = "添加";
|
|
|
+ this.editState = false;
|
|
|
+ this.dialogVisible = true; // 显示弹窗
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 修改
|
|
|
+ */
|
|
|
+ clickModify() {
|
|
|
+ this.selectedRow = this.selectionsData[0];
|
|
|
+ this.detailData = Object.assign({}, this.selectedRow);
|
|
|
+
|
|
|
+ this.editType = false;
|
|
|
+ this.dialogTitle = "修改";
|
|
|
+ this.editState = false;
|
|
|
+ this.dialogVisible = true; // 显示弹窗
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 删除
|
|
|
+ */
|
|
|
+ clickDelete() {
|
|
|
+ this.$confirm("确定删除?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(() => {
|
|
|
+ this.delete();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickCancel() {
|
|
|
+ this.dialogVisible = false; // 关闭弹窗
|
|
|
+ },
|
|
|
+ clickSave() {
|
|
|
+ let flag = this.$refs.dForm.validate();
|
|
|
+ if (flag) {
|
|
|
+ if (this.editType) this.add(); // 新增
|
|
|
+ else this.modify(); // 修改
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /* ----- 组件事件 ----- */
|
|
|
+ /**
|
|
|
+ * @description 改变当前页
|
|
|
+ */
|
|
|
+ handleCurrentChange(current) {
|
|
|
+ this.pageInfo.current = current;
|
|
|
+ this.bindList();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 分页每页条数
|
|
|
+ */
|
|
|
+ handleSizeChange(size) {
|
|
|
+ this.pageInfo.size = size;
|
|
|
+ this.bindList();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @description 选择改变
|
|
|
+ */
|
|
|
+ handleSelectionChange(rows) {
|
|
|
+ this.selectionsData = rows;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|