合同解除按钮

雷海东
src/views/compliancemanagement/contractmanagement/contract/index.vue
--- a/src/views/compliancemanagement/contractmanagement/contract/index.vue
查看文件 @7221cea
+++ b/src/views/compliancemanagement/contractmanagement/contract/index.vue
查看文件 @7221cea
@@ -141,30 +141,73 @@
       </el-table-column>
       <el-table-column label="甲方" align="center" prop="partyA" width="200">
         <template slot-scope="scope">
-        <a :href="scope.row.partyAAddress" target="_blank" style="color: #1890ff;;">{{ scope.row.partyA }}</a>
+          <a
+            :href="scope.row.partyAAddress"
+            target="_blank"
+            style="color: #1890ff"
+            >{{ scope.row.partyA }}</a
+          >
         </template>
       </el-table-column>
       <el-table-column label="乙方" align="center" prop="partyB" width="200">
         <template slot-scope="scope">
-        <a :href="scope.row.partyBAddress" target="_blank" style="color: #1890ff;;">{{ scope.row.partyB }}</a>
+          <a
+            :href="scope.row.partyBAddress"
+            target="_blank"
+            style="color: #1890ff"
+            >{{ scope.row.partyB }}</a
+          >
         </template>
       </el-table-column>
-      <el-table-column label="付款方式" align="center" prop="paymentMethod" width="200"/>
-      <el-table-column label="签订日期" align="center" prop="signingDate" width="100">
+      <el-table-column
+        label="付款方式"
+        align="center"
+        prop="paymentMethod"
+        width="200"
+      />
+      <el-table-column
+        label="签订日期"
+        align="center"
+        prop="signingDate"
+        width="100"
+      >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.signingDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.signingDate, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="标的物信息" align="center" prop="subjectInformation" width="200" />
-      <el-table-column label="附件" align="center" prop="attachments" width="100">
+      <el-table-column
+        label="标的物信息"
+        align="center"
+        prop="subjectInformation"
+        width="200"
+      />
+      <el-table-column
+        label="附件"
+        align="center"
+        prop="attachments"
+        width="100"
+      >
         <!-- <template slot-scope="scope">  
           <img :src="baseUrl + scope.row.attachments" width="40px" height="auto" style="cursor: pointer"/>
         </template> -->
         <template slot-scope="scope">
-          <img v-if="scope.row.attachments" src="@/assets/images/PDF.png" @click="preview(scope.row.attachments)" width="40px" height="auto" style="cursor: pointer"/>
+          <img
+            v-if="scope.row.attachments"
+            src="@/assets/images/PDF.png"
+            @click="preview(scope.row.attachments)"
+            width="40px"
+            height="auto"
+            style="cursor: pointer"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  fixed="right" width="200">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        fixed="right"
+        width="200"
+      >
         <template slot-scope="scope">
           <el-button
             type="text"
@@ -206,6 +249,15 @@
             @click="handleEdit(scope.row)"
             >合同变更</el-button
           >
+          <el-switch
+            class="switch"
+            v-model="scope.row.status"
+            :active-value="0"
+            :inactive-value="1"
+            active-text="进行中"
+            inactive-text="已解除"
+          >
+          </el-switch>
         </template>
       </el-table-column>
     </el-table>
@@ -217,8 +269,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-    <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
+      title="合同预览"
+      :visible.sync="dialogVisibleContract"
+      width="50%"
+      center
+      :before-close="handleClose"
+    >
+      <vue-pdf
+        :src="pdfUrl"
+        type="application/pdf"
+        width="100%"
+        height="800px"
+      />
     </el-dialog>
     <!-- 添加或修改【请填写功能名称】对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
@@ -275,10 +338,15 @@
           <el-input v-model="form.attachments" placeholder="请输入附件" />
         </el-form-item> -->
         <el-form-item label="变更原因" prop="reasonChange">
-          <el-input v-model="form.reasonChange" placeholder="请输入变更原因"/>
+          <el-input v-model="form.reasonChange" placeholder="请输入变更原因" />
         </el-form-item>
         <el-form-item label="变更内容" prop="reasonText">
-          <el-input type="textarea" v-model="form.reasonText" placeholder="请输入变更内容" :row="3"/>
+          <el-input
+            type="textarea"
+            v-model="form.reasonText"
+            placeholder="请输入变更内容"
+            :row="3"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -292,19 +360,26 @@
 </template>
 <script>
-import { listContract, getContract, delContract, addContract, updateContract } from "@/api/compliancemanagement/contract";
-import {startProcess,stopProcess} from "@/api/workflow/process"
-import VuePdf from 'vue-pdf';
+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
+    VuePdf,
   },
   data() {
     return {
-      pdfUrl: '',
-      dialogVisibleContract:false,
-      baseUrl:process.env.VUE_APP_BASE_API+ '/',
+      switchValue: true,
+      pdfUrl: "",
+      dialogVisibleContract: false,
+      baseUrl: process.env.VUE_APP_BASE_API + "/",
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -344,7 +419,7 @@ export default {
       },
       // 表单参数
       form: {},
-      biangeng:[],
+      biangeng: [],
       // 表单校验
       rules: {
@@ -381,10 +456,10 @@ export default {
           { required: true, message: "附件不能为空", trigger: "blur" },
         ],
         reasonChange: [
-          {required: true ,message:'变更原因不能为空', trigger:'blur'}
+          { required: true, message: "变更原因不能为空", trigger: "blur" },
         ],
         reasonText: [
-          {required: true ,message:'变更内容不能为空', trigger:'blur'}
+          { required: true, message: "变更内容不能为空", trigger: "blur" },
         ],
         id: [{ required: true, message: "不能为空", trigger: "blur" }],
       },
@@ -411,13 +486,13 @@ export default {
     },
     //合同附件预览
     preview(contract) {
-      this.dialogVisibleContract = true
-      console.log('contract:',contract)
-      this.pdfUrl = this.baseUrl + contract
+      this.dialogVisibleContract = true;
+      console.log("contract:", contract);
+      this.pdfUrl = this.baseUrl + contract;
     },
     handleClose() {
-        this.pdfUrl = ''
-        this.dialogVisibleContract = false
+      this.pdfUrl = "";
+      this.dialogVisibleContract = false;
     },
     // 表单重置
     reset() {
@@ -434,8 +509,8 @@ export default {
         signingDate: undefined,
         subjectInformation: undefined,
         attachments: undefined,
-        reasonChange:undefined,
-        reasonText:undefined,
+        reasonChange: undefined,
+        reasonText: undefined,
         id: undefined,
       };
       this.resetForm("form");
@@ -466,10 +541,10 @@ export default {
     handleEdit(row) {
       this.loading = true;
       this.reset();
-       this.biangeng=row
-       console.log("变更值：",this.biangeng)
-       const id = row.id || this.ids
-       getContract(id).then(response => {
+      this.biangeng = row;
+      console.log("变更值：", this.biangeng);
+      const id = row.id || this.ids;
+      getContract(id).then((response) => {
         this.loading = false;
         this.form = response.data;
         this.open = true;
@@ -487,8 +562,8 @@ export default {
                 this.$modal.msgSuccess("合同变更成功，已重新启动流程");
                 this.open = false;
                 this.getList();
-                console.log("变更列表值：",this.biangeng)
-                this.handleAgain2(this.biangeng)
+                console.log("变更列表值：", this.biangeng);
+                this.handleAgain2(this.biangeng);
               })
               .finally(() => {
                 this.buttonLoading = false;
@@ -538,7 +613,7 @@ export default {
     },
     /** 流程流转记录 */
     handleFlowRecord(row) {
-      console.log(row)
+      console.log(row);
       this.$router.push({
         path: "/workflow/process/detail/" + row.procInsId,
         query: {
@@ -557,12 +632,12 @@ export default {
       });
     },
     handleAgain(row) {
-      console.log(row)
-      startProcess(row.procDefId,row).then((res) =>{
-        if(res){
+      console.log(row);
+      startProcess(row.procDefId, row).then((res) => {
+        if (res) {
           this.$modal.msgSuccess("流程重启动成功");
         }
-      })
+      });
       // this.$router.push({
       //   path: "/workflow/process/start/" + row.deployId,
@@ -574,10 +649,43 @@ export default {
       // console.log(row);
     },
     handleAgain2(row) {
-      console.log(row)
-      startProcess(row.procDefId,row).then((res) =>{
-      })
-    }
+      console.log(row);
+      startProcess(row.procDefId, row).then((res) => {});
+    },
   },
 };
 </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>