合同统计

+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="合同编号" prop="contractno">
+        <el-input
+          v-model="queryParams.contractno"
+          placeholder="请输入合同编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="合同名称" prop="contractName">
+        <el-input
+          v-model="queryParams.contractName"
+          placeholder="请输入合同名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </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"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!--<el-col :span="1.5">
+         <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:contract:add']"
+        >新增</el-button> 
+      </el-col>-->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:contract:edit']"
+        >修改</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:contract:remove']"
+          >删除</el-button
+        >
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:contract:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="contractList"
+      @selection-change="handleSelectionChange"
+      width="100%"
+    >
+      <el-table-column type="selection" width="50px" align="center" />
+      <el-table-column label="单位编号" align="center" prop="orgcode" />
+      <el-table-column label="单位名称" align="center" prop="orgname" />
+      <el-table-column label="进行中合同" align="center" prop="tocontract" />
+      <el-table-column label="已完成合同" align="center" prop="okcontract" />
+      <el-table-column label="已解除合同" align="center" prop="stopcontract" />
+      <el-table-column label="应付金额" align="center" prop="copePrice" />
+      <el-table-column label="已付金额" align="center" prop="paidPrice" />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="contractList"
+    />
+    <el-dialog
+      title="合同预览"
+      :visible.sync="dialogVisibleContract"
+      width="50%"
+      center
+      :before-close="handleClose"
+    >
+      <vue-pdf
+        :src="pdfUrl"
+        type="application/pdf"
+        width="100%"
+        height="800px"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listContract,
+  getContract,
+  delContract,
+  addContract,
+  updateContract,
+} from "@/api/compliancemanagement/contract";
+import { startProcess, stopProcess } from "@/api/workflow/process";
+import VuePdf from "vue-pdf";
+export default {
+  name: "Contract",
+  components: {
+    VuePdf,
+  },
+  data() {
+    return {
+      switchValue: true,
+      pdfUrl: "",
+      dialogVisibleContract: false,
+      baseUrl: process.env.VUE_APP_BASE_API + "/",
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 6,
+      // 【请填写功能名称】表格数据
+      contractList: [
+        {
+          orgcode: "001",
+          orgname: "山西人民出版社",
+          tocontract: 5,
+          okcontract: 2,
+          stopcontract: 1,
+          copePrice: 1000000,
+          paidPrice: 800000,
+        },
+        {
+          orgcode: "002",
+          orgname: "山西教育出版社",
+          tocontract: 6,
+          okcontract: 1,
+          stopcontract: 1,
+          copePrice: 900000,
+          paidPrice: 700000,
+        },
+        {
+          orgcode: "003",
+          orgname: "希望出版社",
+          tocontract: 3,
+          okcontract: 2,
+          stopcontract: 0,
+          copePrice: 4561234,
+          paidPrice: 4561234,
+        },
+        {
+          orgcode: "004",
+          orgname: "北岳文艺出版社",
+          tocontract: 8,
+          okcontract: 4,
+          stopcontract: 0,
+          copePrice: 98765432,
+          paidPrice: 98765432,
+        },
+        {
+          orgcode: "005",
+          orgname: "山西科学技术出版社",
+          tocontract: 9,
+          okcontract: 4,
+          stopcontract: 1,
+          copePrice: 85296374,
+          paidPrice: 85296374,
+        },
+        {
+          orgcode: "006",
+          orgname: "山西经济出版社",
+          tocontract: 4,
+          okcontract: 1,
+          stopcontract: 0,
+          copePrice: 74185296,
+          paidPrice: 74185296,
+        },
+      ],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        contractno: undefined,
+        contractName: undefined,
+        contractType: undefined,
+        contractAmount: undefined,
+        effectiveDate: undefined,
+        expirationDate: undefined,
+        partyA: undefined,
+        partyB: undefined,
+        paymentMethod: undefined,
+        signingDate: undefined,
+        subjectInformation: undefined,
+        attachments: undefined,
+      },
+      // 表单参数
+      form: {},
+      biangeng: [],
+
+      // 表单校验
+      rules: {
+        contractno: [
+          { required: true, message: "合同编号不能为空", trigger: "blur" },
+        ],
+        contractName: [
+          { required: true, message: "合同名称不能为空", trigger: "blur" },
+        ],
+        contractType: [
+          { required: true, message: "合同类型不能为空", trigger: "change" },
+        ],
+        contractAmount: [
+          { required: true, message: "合同金额不能为空", trigger: "blur" },
+        ],
+        effectiveDate: [
+          { required: true, message: "生效日期不能为空", trigger: "blur" },
+        ],
+        expirationDate: [
+          { required: true, message: "到期日期不能为空", trigger: "blur" },
+        ],
+        partyA: [{ required: true, message: "甲方不能为空", trigger: "blur" }],
+        partyB: [{ required: true, message: "乙方不能为空", trigger: "blur" }],
+        paymentMethod: [
+          { required: true, message: "付款方式不能为空", trigger: "blur" },
+        ],
+        signingDate: [
+          { required: true, message: "签订日期不能为空", trigger: "blur" },
+        ],
+        subjectInformation: [
+          { required: true, message: "标的物信息不能为空", trigger: "blur" },
+        ],
+        attachments: [
+          { required: true, message: "附件不能为空", trigger: "blur" },
+        ],
+        reasonChange: [
+          { required: true, message: "变更原因不能为空", trigger: "blur" },
+        ],
+        reasonText: [
+          { required: true, message: "变更内容不能为空", trigger: "blur" },
+        ],
+        id: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  created() {
+    // this.getList();
+    this.contractList = [
+      {
+        orgcode: "001",
+        orgname: "山西人民出版社",
+        tocontract: 5,
+        okcontract: 2,
+        stopcontract: 1,
+        copePrice: 1000000,
+        paidPrice: 800000,
+      },
+      {
+        orgcode: "002",
+        orgname: "山西教育出版社",
+        tocontract: 6,
+        okcontract: 1,
+        stopcontract: 1,
+        copePrice: 900000,
+        paidPrice: 700000,
+      },
+      {
+        orgcode: "003",
+        orgname: "希望出版社",
+        tocontract: 3,
+        okcontract: 2,
+        stopcontract: 0,
+        copePrice: 4561234,
+        paidPrice: 4561234,
+      },
+      {
+        orgcode: "004",
+        orgname: "北岳文艺出版社",
+        tocontract: 8,
+        okcontract: 4,
+        stopcontract: 0,
+        copePrice: 98765432,
+        paidPrice: 98765432,
+      },
+      {
+        orgcode: "005",
+        orgname: "山西科学技术出版社",
+        tocontract: 9,
+        okcontract: 4,
+        stopcontract: 1,
+        copePrice: 85296374,
+        paidPrice: 85296374,
+      },
+      {
+        orgcode: "006",
+        orgname: "山西经济出版社",
+        tocontract: 4,
+        okcontract: 1,
+        stopcontract: 0,
+        copePrice: 74185296,
+        paidPrice: 74185296,
+      },
+    ];
+    this.loading = false;
+  },
+  methods: {
+    /** 查询【请填写功能名称】列表 */
+    getList() {
+      this.loading = true;
+      listContract(this.queryParams).then((response) => {
+        this.contractList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        console.log(this.contractList);
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    //合同附件预览
+    preview(contract) {
+      this.dialogVisibleContract = true;
+      console.log("contract:", contract);
+      this.pdfUrl = this.baseUrl + contract;
+    },
+    handleClose() {
+      this.pdfUrl = "";
+      this.dialogVisibleContract = false;
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        contractno: undefined,
+        contractName: undefined,
+        contractType: undefined,
+        contractAmount: undefined,
+        effectiveDate: undefined,
+        expirationDate: undefined,
+        partyA: undefined,
+        partyB: undefined,
+        paymentMethod: undefined,
+        signingDate: undefined,
+        subjectInformation: undefined,
+        attachments: undefined,
+        reasonChange: undefined,
+        reasonText: undefined,
+        id: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      // this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    // handleAdd() {
+    //   this.reset();
+    //   this.open = true;
+    //   this.title = "添加";
+    // },
+
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？')
+        .then(() => {
+          this.loading = true;
+          return delContract(ids);
+        })
+        .then(() => {
+          this.loading = false;
+          // this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/contract/export",
+        {
+          ...this.queryParams,
+        },
+        `contract_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>
+<style>
+/* switch按钮样式 */
+.switch .el-switch__label {
+  position: absolute;
+  display: none;
+  color: #fff !important;
+}
+/*打开时文字位置设置*/
+.switch .el-switch__label--right {
+  z-index: 1;
+}
+/* 调整打开时文字的显示位子 */
+.switch .el-switch__label--right span {
+  margin-right: 9px;
+}
+/*关闭时文字位置设置*/
+.switch .el-switch__label--left {
+  z-index: 1;
+}
+/* 调整关闭时文字的显示位子 */
+.switch .el-switch__label--left span {
+  margin-left: 9px;
+}
+/*显示文字*/
+.switch .el-switch__label.is-active {
+  display: block;
+}
+/* 调整按钮的宽度 */
+.switch.el-switch .el-switch__core,
+.el-switch .el-switch__label {
+  width: 70px !important;
+  margin: 0;
+}
+</style>