客户列表

zengh

2021-02-01 f5aca8b44e00a441830b5c73245cb2c249e4c024

 src/views/clientManagement/clientManagement.vue

@@ -6,49 +6,75 @@
      </basic-container>
    </el-col>
    <el-col :span="21">
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               ref="crud"
               @row-del="rowDel"
               v-model="form"
               :permission="permissionList"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :before-open="beforeOpen"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.clientManagement_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{row}"
                slot="category">
        <el-tag>{{row.categoryName}}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
      <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   ref="crud"
                   @row-del="rowDel"
                   v-model="form"
                   :permission="permissionList"
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :row-style="rowStyle"
                   :before-open="beforeOpen"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete"
                       plain
                       v-if="permission.clientManagement_delete"
                       @click="handleDelete">删 除
            </el-button>
          </template>


          <template slot-scope="{ row }" slot="devicestate">
            <el-tag>{{
              row.devicestate == "0" ? "撤防" : row.devicestate == "1" ? "布防" : "无"
              }}
            </el-tag>
          </template>

          <template slot-scope="{ row }" slot="dtype">
            <el-tag>{{
              row.dtype == "0" ? "掉线" : row.dtype == "1" ? "在线" : "无"
              }}
            </el-tag>
          </template>

        </avue-crud>

      </basic-container>
    </el-col>
    <el-dialog title="缴费提醒" :visible.sync="dialogTableVisible" 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>
    </el-dialog>
  </el-row>
</template>

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

  export default {
    created() {
      this.payWin();
    },
    data() {
      return {
        form: {},
@@ -59,6 +85,8 @@
          currentPage: 1,
          total: 0
        },
        dialogTableVisible: false,
        gridData:null,
        selectionList: [],
        treeDeptId: '',
        treeData: [],
@@ -67,7 +95,7 @@
          lazy: true,
          treeLoad: function (node, resolve) {
            const parentId = (node.level === 0) ? 0 : node.data.id;
            getzcxlTree(parentId).then(res => {
            getDeptLazyTree(parentId).then(res => {
              resolve(res.data.data.map(item => {
                return {
                  ...item,
@@ -88,63 +116,144 @@
        },
        option: {
          height: 'auto',
          indexLabel:'序号',
          calcHeight: 30,
          labelWidth:'100',
          indexLabel: '序号',
          calcHeight: 80,
          labelWidth: '100',
          dialogWidth: 950,
          menuWidth: 160,
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          searchSpan:4,
          searchSpan: 4,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          selection: false,
          dialogClickModal: false,
          column: [
            {
              label: "设备名称",
              width: 130,
              prop: "deviceName",
              searchPlaceholder:"请输入设备名称/编号",
              searchPlaceholder: "请输入设备名称/编号",
              search: true,
            },
            {
              label: "设备编号",
              prop: "deviceNumber",
              width: 130
            },
            {
              label: "行政区",
              prop: "addvcd",
              label: "省份",
              prop: "province",
              search: true,
            },{
              searchSpan: 3,
              searchLabelWidth: 60,
              placeholder: "省份",
              type: "select",
              props: {
                label: "name",
                value: "code"
              },
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 6,
              className: "cityClass1"
            },
            {
              label: "地市",
              prop: "city",
              type: "select",
              searchPlaceholder: "地市",
              placeholder: "地市",
              searchLabelWidth: 1,
              searchSpan: 2,
              search: true,
              props: {
                label: "name",
                value: "code"
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass2"
            },
            {
              label: "区县",
              searchSpan: 2,
              searchLabelWidth: 1,
              searchPlaceholder: "区县",
              placeholder: "区县",
              search: true,
              prop: "district",
              type: "select",
              props: {
                label: "name",
                value: "code"
              },
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
            }, {
              label: "布撤防状态",
              prop: "devicestate",
            },{
              type: "select",
              slot: true,
              width: 100,
              dicData: [
                {
                  label: "撤防",
                  value: "0"
                },
                {
                  label: "布防",
                  value: "1"
                }
              ]
            }, {
              label: "设备状态",
              prop: "dtype",
              search: true,
            },{
              slot: true,
              type: "select",
              dicData: [
                {
                  label: "掉线",
                  value: "0"
                },
                {
                  label: "在线",
                  value: "1"
                }
              ]
            }, {
              label: "设备类型",
              prop: "deviceType",
              width: 150,
              search: true,
            },{
            }, {
              label: "权属",
              prop: "ownership",
            },{
            }, {
              label: "街道",
              prop: "street",
            },{
              width: 150
            }, {
              label: "缴费信息",
              prop: "pay",
            },{
            }, {
              label: "安装时间",
              prop: "stime",
            },{
              width: 130
            }, {
              label: "到期时间",
              prop: "expireTime",
            },{
              width: 130
            }, {
              label: "最后上传时间",
              prop: "heartbeat",
              width: 130
            },

          ]
@@ -171,6 +280,11 @@
      }
    },
    methods: {
      nodeClick(data) {
        this.treeDeptId = data.id;
        this.page.currentPage = 1;
        this.onLoad(this.page);
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
@@ -283,19 +397,68 @@
            ...this.query
          };
          values.releaseTimeRange = null;
        }else{
          values = {
            ...params,
            ...this.query
          };
        }
        this.loading = true;
        getList(page.currentPage, page.pageSize, values).then(res => {
        getList(page.currentPage, page.pageSize, values, this.treeDeptId).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }, rowStyle({row, column, rowIndex}) {
        if (row.heartbeat != null && row.heartbeat != "" ) {
          var date = new Date(row.heartbeat).getTime();
          var Dqdate = new Date().getTime();
          if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) {
            return {
              color: "#15a2fe"
            };
          }

        }else if(row.heartbeat == ""){
          return {
            color: "#15a2fe"
          };
        }
      },
      payWin(){
        var that = this;
        getAll().then(res => {
          var data =res.data.data;
          var lists = [];
          var xb = 0;
          for (var i = 0; i < data.length; i++) {
            if (data[i].type == "1") {
              xb++;
              data[i].xb = xb;
              lists.push(data[i]);
            }
          }
          if (lists.length > 0){
            that.gridData = lists;
            that.dialogTableVisible = true;
          }
        });

      }
    }
  };
</script>

<style>
  .payWin{
    overflow-y: auto;
    height: 350px;
  }

  .payWin .el-dialog__body{
    padding-top: 0px !important;
  }

</style>