缴费

tangzy

2021-03-14 8257ffa6fb43c958cd8c82292e92166da386bd63

缴费

 src/views/clientManagement/clientManagement.vue

@@ -78,6 +78,7 @@

        </avue-crud>


        <el-drawer
          title="电子地图"
          append-to-body="true"
@@ -96,21 +97,97 @@
      </basic-container>
    </el-col>
    <el-dialog title="缴费提醒" :visible.sync="dialogTableVisible" top="280px" custom-class="payWin" append-to-body="true">
      <el-table :data="gridData">
        <el-table-column property="xb" label="序号" width="50"></el-table-column>
        <el-table-column property="deviceName" label="设备名称" width="150"></el-table-column>
        <el-table-column property="deviceNumber" label="设备编号" width="150"></el-table-column>
        <el-table-column property="street" label="所属单位" width="200"></el-table-column>
        <el-table-column property="expireTime" label="到期时间"></el-table-column>
        <el-table-column property="pay" label="缴费信息"></el-table-column>


      <el-dialog
        class="real-jf-dialog"
        title="缴费"
        :visible.sync="realjf"
        append-to-body="true"
        :modal="false"
      >
        <el-form
          :model="form"
          label-position="right"
          size="mini"
          label-width="100px"
        >
          <el-col span="12">
            <el-form-item label="到期时间">
              <el-date-picker
                v-model="form.expireTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :offset="4">
            <el-form-item>
              <el-button type="primary" @click.stop="generate(form)"
              >缴费
              </el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-dialog>


      <el-table
        :data="gridData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="xb"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="deviceNumber"
          label="设备编码"
          width="150">
        </el-table-column>
        <el-table-column
          prop="street"
          label="所属单位"
          width="160">
        </el-table-column>
        <el-table-column
          prop="expireTime"
          label="到期时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="pay"
          label="缴费信息"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">一键缴费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-row>
</template>

<script>
  import {getList, remove, update, add, getclient, getDeptLazyTree, getAll} from "@/api/client/client";
import {getList, remove, update, add, getclient, getDeptLazyTree, getAll,updates} from "@/api/client/client";
  import {mapGetters} from "vuex";
import axios from "axios";

  export default {
    created() {
@@ -129,6 +206,7 @@
          total: 0
        },
        dialogTableVisible: false,
      realjf: false,
        gridData: null,
        selectionList: [],
        treeDeptId: '',
@@ -404,6 +482,25 @@
      }
    },
    methods: {
    generate(row) {
      updates(row.expireTime,row.deviceNumber).then(() => {
        this.dialogTableVisible = false;
        this.realjf = false;
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "缴费成功!"
        });
      }, error => {
        window.console.log(error);
      });
    },
    handleClick(row) {
      this.form=row;
      this.dialogTableVisible = true;
      this.realjf = true;

    },
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
@@ -570,6 +667,10 @@
          };
        }
      },
    handleManage(row) {
      this.form;
      this.dialogTableVisible = true;
    },
      payWin() {
        var that = this;
        getAll().then(res => {
@@ -622,4 +723,30 @@
    padding-top: 0px !important;
  }

.real-jf-dialog {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: 0px !important;
  bottom: 0 !important;
  margin: auto !important;
  height: 100% !important;
  width: 800px !important;
}

.real-jf-dialog .el-dialog {
  position: absolute !important;
  top: 140px !important;
  left: 245px !important;
  right: 0px !important;
  bottom: 0 !important;
  margin: auto !important;
  margin-top: 15vh !important;
  height: 170px;
}

.real-jf-dialog .el-dialog .el-dialog__body {
  height: calc(100% - 54px);
  box-sizing: border-box;
}
</style>