spfm-market-front/src/pages/main/budget/budgetList.vue

<template>
  <!-- <div style="height: 95%"> -->
  <div class="container" style="margin: 15px 0 0 0">
    <fullscreen
      :fullscreen.sync="fullscreen"
      class="container-box"
      style="margin: 0 !important; padding: 0 !important"
    >
      <div class="titbox">
        <h2>部门预算模板管理</h2>
        <div>
          <i class="el-icon-refresh" @click="iconCli(1)"></i>
          <i class="el-icon-full-screen" @click="iconCli(2)"></i>
          <!--                    <i class="el-icon-folder-opened"></i>-->
          <!--                    <i class="el-icon-view"></i>-->
          <!--                    <i class="el-icon-more"></i>-->
        </div>
      </div>
      <div class="search">
        <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
        <el-button size="small" @click="addExcel" type="primary"
          >新增模板</el-button
        >
      </div>

      <div class="tabbox">
        <el-table
          height="calc(100% - 40px)"
          v-loading="loading"
          class="com-table"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          size="small"
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="tempName"
            label="模板名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opTime"
            show-overflow-tooltip
            label="配置时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opNo"
            show-overflow-tooltip
            label="配置工号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="opName"
            show-overflow-tooltip
            label="配置姓名"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="tempStsDesc"
            show-overflow-tooltip
            label="模板状态"
          >
          </el-table-column>
          <el-table-column align="center" prop="tempTypeDesc" label="模板类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="tempStsDesc"
            show-overflow-tooltip
            label="权限状态"
          >
            <template slot-scope="scope">
              {{ scope.row.powerFlag == 0 ? "开" : "关" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="hotline"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.tempStsDesc == '作废'"
                size="mini"
                type="primary"
                plain
                @click="issue(scope.row)"
                >下发</el-button
              >
              <el-button
                size="mini"
                type="primary"
                plain
                @click="detailes(scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                plain
                @click="updates(scope.row)"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.tempStsDesc == '作废'"
                size="mini"
                type="danger"
                plain
                @click="deletes(scope.row)"
                >作废</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageBox"
          @current-change="currchange"
          layout="prev, pager, next"
          background
          :total="total"
        >
        </el-pagination>
      </div>
      <myMessage
        :messTit="messTit"
        @closeMessage="closeMessage"
        :centerDialogVisible="centerDialogVisible"
        v-if="centerDialogVisible"
      ></myMessage>
    </fullscreen>
    <el-dialog
      title="下发预算"
      :visible.sync="dialogStatus"
      width="50%"
      :close-on-press-escape="false"
      :show-close="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="80px"
      >
        <el-form-item label="预算标题" prop="woTitle">
          <el-input
            placeholder="请输入预算标题"
            v-model="formData.woTitle"
          ></el-input>
        </el-form-item>
        <el-form-item label="预算说明" prop="woDesc">
          <el-input
            placeholder="请输入预算说明"
            v-model="formData.woDesc"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="typeFlag == '2'" label="下发月份" prop="sendMonth">
          <el-date-picker
            style="width: 100% !important"
            v-model="formData.sendMonth"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="typeFlag == '0' || typeFlag == '1' || typeFlag == '3'"
          label="下发年份"
          prop="sendYear"
        >
          <el-date-picker
            style="width: 100% !important"
            v-model="formData.sendYear"
            value-format="yyyy"
            type="year"
            placeholder="选择年份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="typeFlag == '1'"
          label="下发季度"
          prop="sendQuarter"
        >
          <el-select
            style="width: 100% !important"
            v-model="formData.sendQuarter"
            placeholder="请选择季度"
          >
            <el-option label="一季度" value="01"> </el-option>
            <el-option label="二季度" value="02"> </el-option>
            <el-option label="三季度" value="03"> </el-option>
            <el-option label="四季度" value="04"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="反馈时间" prop="requiredTime">
          <el-date-picker
            style="width: 100%"
            v-model="formData.requiredTime"
            type="datetime"
            placeholder="选择反馈时间"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="接收人" prop="sendNoArr">
          <el-select
            placeholder="选择接收人"
            v-model="formData.sendNoArr"
            multiple
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="items in options"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetUser('ruleForm')">取 消</el-button>
        <el-button @click="subUser('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mySearch from "../../../components/search";
import myMessage from "../../../components/myMessage.vue";
export default {
  components: {
    mySearch,
    myMessage,
  },
  data() {
    return {
      centerDialogVisible: false,
      messTit: "",
      dataId: "",
      typeFlag: "",
      value1: "",
      options: [],
      dialogStatus: false,
      formData: {
        woTitle: "",
        woDesc: "",
        requiredTime: "",
        sendNoArr: "",
        sendYear: "",
        sendMonth: "",
        sendQuarter: "",
      },
      rules: {
        woTitle: [
          { required: true, message: "请输入预算标题", trigger: "blur" },
        ],
        woDesc: [
          { required: true, message: "请输入预算备注", trigger: "change" },
        ],
        requiredTime: [
          {
            required: true,
            message: "请选择反馈时间",
            trigger: "change",
          },
        ],
        sendNoArr: [
          {
            required: true,
            message: "请选择接收人",
            trigger: "change",
          },
        ],
        sendYear: [
          {
            required: true,
            message: "请选择下发年份",
            trigger: "change",
          },
        ],
        sendMonth: [
          {
            required: true,
            message: "请选择下发月份",
            trigger: "change",
          },
        ],
        sendQuarter: [
          {
            required: true,
            message: "请选择下发季度",
            trigger: "change",
          },
        ],
      },
      headers: {
        agileauthtoken: sessionStorage.agileauthtoken.replace(/"/g, ""),
      },
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [
        {
          name: "黑龙江公司移动成本预算简表",
          cNo: "admin",
          cUser: "admin",
          ctime: "2021-03-10",
          status: "已下发",
        },
        {
          name: "黑龙江公司移动成本预算简表1",
          cNo: "admin",
          cUser: "admin",
          ctime: "2021-03-10",
          status: "草稿",
        },
      ],
      searchList: [
        {
          type: "input",
          tit: "模板名称",
          value: "",
          width: "100%",
          options: [],
        },
        // {
        //   type: "input",
        //   tit: "创建时间",
        //   value: "",
        //   width: "100%",
        //   options: [],
        // },
        // {
        //   type: "input",
        //   tit: "模板状态",
        //   value: "",
        //   width: "100%",
        //   options: [],
        // },
      ],
      params: {
        tempName: "",
      },
      loading: false,
      fileList: [],
      fileName: "",
    };
  },
  methods: {
    chenckType(val) {
      if (val.tempStsDesc == "草稿") {
        this.$http({
          url: "/market/pre/updateType",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            id: val.id,
            tempType: val.tempType,
            tempTypeDesc: val.tempTypeDesc,
          },
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        });
      }
    },
    chenck(val) {
      if (val.tempStsDesc == "草稿") {
        this.$http({
          url: "/market/pre/updatePower",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: { id: val.id },
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getList(this.params, this.pageSize);
        });
      }
    },
    detailes(val) {
      this.$router.push("/initExcelsee?status=see&id=" + val.id + "");
    },
    // 增加表单处理
    subUser(formName) {
      let sendNoArr = [];
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formData.sendNoArr.map((item) => {
            this.options.map((row) => {
              if (item == row.value) {
                sendNoArr.push({
                  receiveNo: item,
                  receiveName: row.label,
                  deptCode: row.deptCode,
                  deptName: row.deptName,
                });
              }
            });
          });
          let data = {
            woTitle: this.formData.woTitle,
            woDesc: this.formData.woDesc,
            requiredTime: this.formData.requiredTime,
            sendNoArr: JSON.stringify(sendNoArr),
            preTempId: this.preTempId,
            sendYear: this.typeFlag == "1" ? "" : this.formData.sendYear,
            sendMonth: this.formData.sendMonth,
            sendQuarter:
              this.typeFlag == "1"
                ? this.formData.sendYear + "-" + this.formData.sendQuarter
                : "",
            tempType: this.typeFlag,
            funcCode:
              this.typeFlag == "0"
                ? "1000"
                : this.typeFlag == "1"
                ? "1004"
                : this.typeFlag == "2"
                ? "1001"
                : this.typeFlag == "3"
                ? "1003"
                : "",
          };
          console.log(data);
          this.$http({
            url: "/market/pre/pub",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: data,
          }).then((res) => {
            if (res.data.result == 0) {
              this.$message({
                type: "success",
                message: "下发成功",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.desc,
              });
            }
            this.resetUser(formName);
            this.dialogStatus = false;
            this.getList(this.params, this.pageSize);
          });
        }
      });
    },
    // 取消提交
    resetUser(formName) {
      this.$refs[formName].resetFields();
      this.dialogStatus = false;
    },
    closeDialog() {
      this.dialogStatus = false;
    },
    issue(val) {
      this.typeFlag = val.tempType;
      console.log(this.typeFlag);
      this.preTempId = val.id;
      this.dialogStatus = true;
    },
    defaultMenu(path, name) {
      let defaults = this.$store.state.tabList.filter((item) => {
        if (item.rountPath == path) {
          return item;
        }
      });
      if (defaults.length == 1) {
        return;
      }
      let params = {
        children: "",
        name: name,
        rountPath: path,
        target: "_self",
      };
      let set = new Set([...this.$store.state.tabList, params]);
      this.$store.commit("setDefaultActive", path);
      this.$store.commit("setTabList", Array.from(set));
    },
    deletes(val) {
      this.centerDialogVisible = true;
      this.messTit = "即将作废绩效模板, 是否确定?";
      this.dataId = val.id;
      // this.$confirm("即将作废部门预算模板, 是否确定?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.$http({
      //       url: "/market/pre/cancelPre",
      //       method: "post",
      //       headers: {
      //         "Content-Type": "application/json",
      //       },
      //       data: { id: val.id },
      //     }).then((res) => {
      //       this.$message({
      //         message: "删除成功",
      //         type: "success",
      //       });
      //       this.getList(this.params, this.pageSize);
      //     });
      //   })
      //   .catch(() => {});
    },
    closeMessage(v) {
      this.centerDialogVisible = false;
      if (v === 1) {
        this.$http({
          url: "/market/pre/cancelPre",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: { id: this.dataId },
        }).then((res) => {
          if (res.data.result == "0") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.getList(this.params, this.pageSize);
        });
      }
    },
    addExcel() {
      this.$router.push("/initExceladd?status=add");
      // this.defaultMenu("/initExceladd?status=add", "新增预算模板");
    },
    updates(val) {
      this.$router.push("/initExcelupdate?status=update&id=" + val.id + "");
      // this.defaultMenu("/initExcelupdate?status=update", "修改预算模板");
    },
    //搜索数据
    searchInfo(v) {
      this.params = {};
      v[0] ? (this.params.tempName = v[0]) : "";
      this.getList(this.params, this.pageSize);
    },
    //获取列表
    getList(v, n) {
      this.loading = true;
      this.pageSize = n;
      this.$http({
        url: "/market/pre/queryPage",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + n + '","pageSize":"10"}',
        },
        data: v,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.total = res.data.totalRecord;
      });
    },
    //功能栏
    iconCli(v) {
      if (v === 1) {
        this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
        this.fullscreen = !this.fullscreen;
      }
    },
    // 分页
    currchange(v) {
      this.pageSize = v;
      this.getList(this.params, this.pageSize);
    },
    getOpations() {
      this.$http({
        url: "/sysmgr/sys/mk/offices/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        res.data.body.map((item) => {
          this.options.push({
            label: item.loginName,
            value: item.loginNo,
            deptCode: item.groupId,
            deptName: item.groupName,
          });
        });
      });
    },
  },
  mounted() {
    this.getOpations();
    this.getList(this.params, this.pageSize);
    // this.getList(this.params, this.pageSize);
  },
  watch: {
    $route() {
      this.getList(this.params, this.pageSize);
    },
  },
};
</script>
<style scoped>
.el-upload-list {
  float: right;
}
.el-input__suffix {
  cursor: pointer;
}
.container .el-upload {
  width: auto !important;
}
</style>
<style scoped lang="scss">
.btn-default {
  display: inline;
  margin-left: 10px;
}
.titbox {
  div {
    float: right;

    i {
      font-size: 22px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.tabbox {
  margin-top: 15px;
}

.pageBox {
  text-align: right;
  margin-top: 10px;
}
</style>