lzga-ui/src/views1/File/Demand/DemandView.vue

<template>
  <div class="containe">
    <!-- <div class="header">
      <span>文档管理</span>
      <img src="../../../assets/img/chevron-down.png" alt="" />
      <img src="../../../assets/img/slash.png" alt="" />
      <span class="top1">扩容申请</span>
      <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
      <img src="../../../assets/img/slash.png" alt="" />
    </div>
    <div class="title">扩容申请</div> -->
    <div class="main">
      <h3>扩容申请</h3>
      <div class="main-main">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="空间名称" prop="spaceName">
            <el-input
              v-model="queryParams.spaceName"
              placeholder="请输入空间名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="扩容状态" prop="expandStatus">
            <el-select
              v-model="queryParams.expandStatus"
              placeholder="请选择扩容状态"
              clearable
              :popper-append-to-body="false"
            >
              <el-option
                v-for="dict in dict.type.expand_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="reset1"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="expandList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <!-- <el-table-column label="容量信息ID" align="center" prop="expandId" /> -->
          <el-table-column label="空间名称" align="center" prop="spaceName" />
          <el-table-column label="当前容量" align="center" prop="currentCap" />
          <el-table-column label="扩充容量" align="center" prop="expandCap" />
          <el-table-column label="申请理由" align="center" prop="remark" />
          <el-table-column label="扩容状态" align="center" prop="expandStatus">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.expand_status"
                :value="scope.row.expandStatus"
              />
            </template>
          </el-table-column>
          <el-table-column label="申请人" align="center" prop="createBy" />
          <el-table-column
            label="申请时间"
            align="center"
            prop="createTime"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="申请理由"
            align="center"
            prop="remark"
            width="150"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="operat">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-check"
                @click="handleYes(scope.row)"
                v-hasPermi="['doc:expand:edit']"
                >同意扩容</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-close"
                @click="handleNo(scope.row)"
                v-hasPermi="['doc:expand:edit']"
                >拒绝扩容</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改扩容申请对话框 -->
        <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="空间ID" prop="spaceId">
          <el-input v-model="form.spaceId" placeholder="请输入空间ID" />
        </el-form-item>
        <el-form-item label="空间名称" prop="spaceName">
          <el-input v-model="form.spaceName" placeholder="请输入空间名称" />
        </el-form-item>
        <el-form-item label="当前容量" prop="currentCap">
          <el-input v-model="form.currentCap" placeholder="请输入当前容量" />
        </el-form-item>
        <el-form-item label="扩充容量" prop="expandCap">
          <el-input v-model="form.expandCap" placeholder="请输入扩充容量" />
        </el-form-item>
        <el-form-item label="扩容状态" prop="expandStatus">
          <el-radio-group v-model="form.expandStatus">
            <el-radio v-for="dict in dict.type.expand_status" :key="dict.value"
              :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="逻辑删除标志;1/非1" prop="isDel">
          <el-input v-model="form.isDel" placeholder="请输入逻辑删除标志;1/非1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog> -->
      </div>
    </div>
  </div>
</template>
    
<script>
import {
  listExpand,
  getExpand,
  delExpand,
  addExpand,
  yesExpand,
  noExpand,
  updateExpand,
} from "@/api/doc/expand";
import { createLogger } from "vuex";

export default {
  name: "Expand",
  dicts: ["expand_status"],
  data() {
    return {
      //判断是否为申请状态
      operat: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 扩容申请表格数据
      expandList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        spaceName: null,
        currentCap: null,
        expandCap: null,
        expandStatus: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        spaceName: [
          {
            required: true,
            message: "空间名称不能为空",
            trigger: "blur",
          },
        ],
        expandCap: [
          {
            required: true,
            message: "扩充容量不能为空",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "备注不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.queryParams.expandStatus = "1";
    this.getList();
  },
  methods: {
    /** 查询扩容申请列表 */
    getList() {
      this.loading = true;
      listExpand(this.queryParams).then((response) => {
        this.expandList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        expandId: null,
        spaceId: null,
        spaceName: null,
        currentCap: null,
        expandCap: null,
        expandStatus: 1,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        isDel: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      if (this.queryParams.expandStatus !== "1") {
        this.operat = false;
      } else {
        this.operat = true;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.expandId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加扩容申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const expandId = row.expandId || this.ids;
      getExpand(expandId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改扩容申请";
      });
    },
    /** 同意按钮操作 */
    handleYes(row) {
      this.$modal
        .confirm("确认同意 " + row.spaceName + ' 扩容申请"？')
        .then(function () {
          return yesExpand(row.expandId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("同意扩容成功！");
        })
        .catch(() => {});
    },
    /** 拒绝按钮操作 */
    handleNo(row) {
      this.$modal
        .confirm("确认拒绝 " + row.spaceName + ' 扩容申请"？')
        .then(function () {
          return noExpand(row.expandId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("拒绝扩容成功！");
        })
        .catch(() => {});
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.expandId != null) {
            updateExpand(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addExpand(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const expandIds = row.expandId || this.ids;
      this.$modal
        .confirm('是否确认删除扩容申请编号为"' + expandIds + '"的数据项？')
        .then(function () {
          return delExpand(expandIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "doc/expand/export",
        {
          ...this.queryParams,
        },
        `expand_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
    
<style scoped lang='scss'>
.containe {
  color: #7ea4c8;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  padding-left: calc(100vw * (20 / 1920));
  //顶部信息
  // .header {
  //   width: calc(100vw * (300 / 1920));
  //   height: calc(100vh * (22 / 1080));
  //   margin-top: calc(100vh * (20 / 1080));
  //   margin-bottom: calc(100vh * (20 / 1080));
  //   display: flex;
  //   align-items: center;
  //   img {
  //     width: calc(100vw * (16 / 1920));
  //     height: calc(100vh * (16 / 1080));
  //     border: 1px dashed grey;
  //     margin-left: 3px;
  //     margin-right: 3px;
  //   }
  //   .top1 {
  //     color: #2e8aecff;
  //   }
  // }
  // //中间目录列表
  // .title {
  //   height: calc(100vh * (22 / 1080));
  //   margin-top: calc(100vh * (20 / 1080));
  //   margin-bottom: calc(100vh * (20 / 1080));
  //   color: #ffffffff;
  //   font-size: 0.16rem;
  //   font-weight: bold;
  //   line-height: calc(100vh * (22 / 1080));
  // }
  .main {
    width: calc(100vw * (1876 / 1920));
    height: calc(100vh * (930 / 1080));
    background: url(../../../assets/img/Group-610.png);
    background-size: calc(100vw * (1876 / 1920)) calc(100vh * (930 / 1080));
    margin-top: calc(100vh * (35 / 1080));
    h3 {
      font-size: 0.2rem;
      color: #ffffffff;
      padding-top: calc(100vh * (30 / 1080));
      padding-bottom: calc(100vh * (10 / 1080));
      padding-left: calc(100vw * (30 / 1920));
    }
    .main-main {
      width: calc(100vw * (1822 / 1920));
      height: calc(100vh * (850 / 1080));
      margin-left: calc(100vw * (25 / 1920));
      margin-top: calc(100vh * (20 / 1080));
      // background: seagreen;
      .el-table {
        width: calc(100vw * (1822 / 1920));
        height: calc(100vh * (700 / 1080));
        background: transparent;
        overflow: auto;
      }
      .reset1 {
            color: #2e8aecff;
            background: transparent;
            border: 1px solid #2e8aecff;
          }
    }
    //滚动条样式
    //   ::-webkit-scrollbar {
    //     width: 3.5px;
    //   }
    //   ::-webkit-scrollbar-track {
    //     background-color: rgba(0, 0, 0, 0);
    //   }
    //   ::-webkit-scrollbar-thumb {
    //     background: #2e8aec;
    //     border-radius: 3px;
    //   }
    //   ::-webkit-scrollbar-thumb:hover {
    //     background: #2e8aec;
    //   }
  }
}

//底部跳转
::v-deep .pagination-container {
  height: calc(100vh * (50 / 1080));
  background: transparent;
}
::v-deep .pagination-container .el-pagination {
  top: -10px;
}
//table样式
::v-deep .el-table th {
  background: #016c9aa6;
  color: #2e8aec;
}
::v-deep .el-table tr {
  background: transparent;
}
::v-deep .el-table tbody tr:hover > td {
  background-color: #016c9a78 !important;
}
::v-deep .el-table td.el-table__cell {
  border-bottom: 1px solid #006c9aff;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #006c9aff;
}
::v-deep .el-form-item__label {
  color: #2e8aecff;
}
::v-deep .el-input__inner {
  background: transparent;
  border: 1px solid #01d1ffff;
  color: #006c9aff;
}

//table底下白线消失处理
::v-deep .el-table {
  color: #ffffffff;
}
::v-deep .el-table::before {
  width: 0;
}
//按钮样式
// ::v-deep .el-button {
//   background-color: #002a5cff;
//   color: #1890ff;
//   border: none;
// }
//下拉选项样式
::v-deep .el-select-dropdown__list {
   background: #0F1540FF;
}
::v-deep .el-select-dropdown {
   border: none;
}
::v-deep .el-select-dropdown__item.hover {
   background: #0F1540FF;
}
::v-deep li{
  color: #006C9AFF;
}
::v-deep .el-select-dropdown__item.selected{
  color: #006C9AFF;
  font-weight: 500;
}
::v-deep .el-select-dropdown__item.selected:hover{
   color: #FFFFFFFF;
}
::v-deep li:hover {
   background: #1E497CFF !important;
   color: #FFFFFFFF;
}

</style>