feat:印章管理 —增加审批

src/views/ofm/seal.vue

@@ -82,7 +82,7 @@
           prop="is_lending"
           min-width="100"
         >
-            <template #default="scope">
+        <template #default="scope">
               <span v-if="scope.row.is_lending" style="color: red;">是</span>
               <span v-else>否</span>
             </template>
@@ -121,110 +121,33 @@
       </scTable>
     </el-main>
   </el-container>
-  <el-drawer :title="titleMap[type] " v-model="limitedVisible" direction="rtl" size="50%">
+  <el-drawer
-    
+      :title="drawerTitle[mode]"
-    <el-form
+      v-model="limitedVisible"
-      :model="addForm"
+      :destroy-on-close="true"
-      :rules="rules"
+      direction="rtl"
-      ref="addForm"
+      size="70%"
-      label-width="100px"
-      label-position="left"
-    > 
-      <el-form-item label="文件名称" prop="filename">
-        <el-input v-model="addForm.filename" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="联系电话" prop="contacts">
-        <el-input v-model="addForm.contacts" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="印章类型" prop="seal">
-        <el-checkbox-group v-model="addForm.seal">
-          <el-checkbox label="公章"></el-checkbox>
-          <el-checkbox label="法人章"></el-checkbox>
-          <el-checkbox label="合同章"></el-checkbox>
-          <el-checkbox label="财务章"></el-checkbox>
-          <el-checkbox label="其他"></el-checkbox>
-        </el-checkbox-group>
-          <el-input
-            v-if="addForm.seal.includes('其他')"
-            v-model="addForm.seal_other"
-            placeholder = "请输入印章名称"
-            size = "small"
-            style="margin-top: 10;"
-          ></el-input>
-      </el-form-item>
-      <el-form-item label="文件内容">
-          <sc-upload-file
-            v-model="addForm.file"
-            :multiple="false"
-            :limit="1"
-            :accept="['.xlsx', '.xls','.pdf','.docx', '.doc', '.jpg', '.png', '.jpeg']"
-            @success = "fileUPSuccess"
-            >
-          <el-button type="primary" icon="el-icon-upload"> </el-button>
-        </sc-upload-file>
-      </el-form-item>
-      <el-form-item label="用印份数" prop="file_count">
-        <el-input v-model="addForm.file_count" clearable></el-input>
-      </el-form-item>
-      <template v-if="lending_type === 'outer'">
-        <el-form-item label="借用日期">
-          <el-date-picker
-              v-model="timeRange"
-              type="daterange"
-              align="right"
-              value-format="YYYY-MM-DD"
-              unlink-panels
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              @change="handleDateChange">
-             </el-date-picker>
-        </el-form-item>
-        <el-form-item label="实际归还日期" v-auth="'seal.return'">
-          <el-date-picker
-            v-model="addForm.actual_return_date"
-            type="date"
-            align="right"
-            value-format="YYYY-MM-DD"
-            unlink-panels
-            placeholder="选择日期"
-            >
-            </el-date-picker>
-        </el-form-item>
-        <el-form-item label="借用理由" prop="reason" >
-          <el-input 
-            type='textarea' 
-            placeholder="请输入借用理由"
-            v-model="addForm.reason" 
-            rows = '3'>
-          </el-input>
-        </el-form-item>
-      </template>
-    </el-form>
-    <template #footer>
-      <el-button
-					v-for="item in transitions"
-					:key="item.id"
-					type="primary"
-					:loading="isSaving"
-					:disabled="isSaving"
-					@click="submitTicketCreate(item.id)"
-					style="margin-right: 4px"
-				>{{ item.name }}</el-button>
-        <el-button @click="handleCancel">取 消</el-button>
-        <el-button
-            v-auth="'seal.return'"
-            v-if="type !== 'show'"
-            type="primary"
-            :loading="isSaving"
-            @click="submitHandle()"
-        > 保 存</el-button
       >
-    </template>
+  <div style="display: flex; height: calc(100% - 60px);"> 
+    <div style="flex: 1; padding-right: 20px; overflow-y: auto;">
+      <SealForm
+        :mode="mode"
+        v-model="addForm"
+        :lending_type="lending_type"
+        @success="()=>{handleQuery(); limitedVisible = false}"
+        @closed="limitedVisible = false"
+      />
+    </div>
+  </div>
 </el-drawer>
 </template>
 <script>
+
+import SealForm from "./sealForm.vue";
+
+
 export default {
+  components: { SealForm},
   name: "index",
   data() {
     return {
@@ -237,18 +160,17 @@ export default {
       transitions:[],
       timeRange: [],
       lending_type: "",
-      choiceOption: [],
       query: {},
       editId: null,
       isSaving: false,
       limitedVisible: false,
-      limitedWatch: false,
+      mode: "add",
-      type: "add",
+      drawerTitle: {
-      titleMap: {
+        add: "新增印章使用",
-        add: "新增",
+        edit: "编辑印章使用",
-        edit: "编辑",
+        view: "查看印章使用",
-        show: "查看",
       },
+      currentRow: null,
       //表单数据
       addForm: {
         seal: [],
@@ -288,104 +210,24 @@ export default {
 			}
 		},
     handleAdd() {
-      this.type = "add";
+      this.mode = "add";
       this.addForm = this.getDefaultForm();
       this.lending_type = "";
       this.limitedVisible = true;
     },
     handleAdd_outer() {
       this.addForm = this.getDefaultForm();
-      this.type = "add";
+      this.mode = "add";
       this.limitedVisible = true;
       this.lending_type = "outer";
       this.addForm.is_lending = true;
     },
-    handleDateChange(val) {
-      console.log(val);
-      this.addForm.lending_date = val[0];
-      this.addForm.return_date = val[1];
-    },
     handleCancel() {
         this.limitedVisible = false;       // 关闭弹窗
         this.lending_type = "";    // 重置 lending_type
         this.getDefaultForm()// 清空表单
       },
-    submitTicketCreate(id) {
+    
-			let that = this;
-			that.addForm.file = that.test_file;
-			if(that.type == "add") {
-        that.addForm.seal = this.addForm.seal.map(type=>{
-            if(type === "其他"){
-              return this.addForm.seal_other
-            }
-            return type;
-          })
-        that.$API.ofm.lendingseal.create.req(that.addForm).then((res) => {
-          let ticket = {};
-          ticket.title = '印章使用审批单';
-          ticket.workflow = that.initForm.workflow;
-          ticket.ticket_data = {t_id: res.id};
-          ticket.transition = id;
-          that.$API.wf.ticket.create.req(ticket).then((res) => {
-            that.isSaving = false;
-            that.limitedVisible = false;
-            that.$emit("success");
-            that.$message.success("提交成功");
-				}).catch((e) => {
-					that.isSaving = false;
-				});
-			}).catch((e) => {
-				that.isSaving = false;
-			});
-		} else if (that.type == "edit") {
-		    that.$API.ofm.lendingseal.update.req(that.addForm.id, that.addForm).then((res) => {
-				if (that.addForm.ticket == null) {
-					let ticket = {};
-					ticket.title = '印章使用审批单';
-					ticket.workflow = that.initForm.workflow;
-					ticket.ticket_data = {t_id: res.id};
-					ticket.transition = id;
-					that.$API.wf.ticket.create.req(ticket).then((res) => {
-						that.isSaving = false;
-						that.limitedVisible = false;
-						that.$emit("success");
-						that.$message.success("提交成功");
-					}).catch((e) => {
-						that.isSaving = false;
-					});
-				} else {
-					let data = {transition: id, ticket_data: {}}
-					that.$API.wf.ticket.ticketHandle.req(that.addForm.ticket, data).then(res=>{
-						that.isSaving = false;
-						that.limitedVisible = false;
-						that.$emit("success");
-						that.$message.success("提交成功");
-					}).catch((e) => {
-						that.isSaving = false;
-					})
-				}
-			}).catch((err) => {
-				that.isSaving = false;
-				return err;
-			});
-		}
-    this.$refs.table.refresh();
-		},
-    submitHandle() {
-      let that = this;
-      this.$refs.addForm.validate((valid) => {
-        if (valid) {
-          that.isSaving = true;
-          that.addForm.seal = this.addForm.seal.map(type=>{
-            if(type === "其他"){
-              return this.addForm.seal_other
-            }
-            return  type;
-          })
-          that.submit();
-        }
-      });
-    },
     getDefaultForm(){
       return {
         seal: [],
@@ -403,32 +245,9 @@ export default {
         ticket:null
       }
     },
-    async submit() {
-      let that = this;
-      let res = null;
-      try {
-        if (that.type === "add") {
-          res = await that.$API.ofm.lendingseal.create.req(that.addForm);
-        } else {
-          res = await that.$API.ofm.lendingseal.update.req(
-            that.editId,
-            that.addForm
-          );
-        }
-        that.isSaving = false;
-        that.limitedVisible = false;
-        that.$refs.table.refresh();
-      } catch (e) {
-        that.isSaving = false;
-      }
-    },
-		fileUPSuccess(res) {
-			let that = this;
-			this.test_file = res.path;
-		},
     // 审批流结束之后才可以编辑
     sealEidt(row) {
-      this.type = "edit";
+      this.mode = "edit";
       this.editId = row.id;
       this.limitedVisible = true;
       this.lending_type = 'outer';
@@ -468,8 +287,8 @@ export default {
     handleQuery() {
       this.$refs.table.queryData(this.query);
     },
-  },
 
+  },
 };
 </script>
 <style scoped>

src/views/ofm/sealForm.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-container>
+    <el-main>
+<el-form :model="localForm" label-width="100px" label-position="left" :rules="rules">
+    <el-form-item label="文件名称" prop="filename">
+        <el-input v-model="localForm.filename" clearable></el-input>
+    </el-form-item>
+    <el-form-item label="联系电话" prop="contacts">
+        <el-input v-model="localForm.contacts" clearable></el-input>
+    </el-form-item>
+
+    <el-form-item label="印章类型">
+      <el-checkbox-group v-model="localForm.seal">
+        <el-checkbox label="公章"></el-checkbox>
+        <el-checkbox label="法人章"></el-checkbox>
+        <el-checkbox label="合同章"></el-checkbox>
+        <el-checkbox label="财务章"></el-checkbox>
+        <el-checkbox label="其他"></el-checkbox>
+      </el-checkbox-group>
+        <el-input
+            v-if="localForm.seal.includes('其他')"
+            v-model="localForm.seal_other"
+            placeholder = "请输入印章名称"
+            size = "small"
+            style="margin-top: 10;"
+          ></el-input>
+    </el-form-item>
+    <template v-if="lending_type === 'outer'">
+        <el-form-item label="借用日期">
+          <el-date-picker
+              v-model="timeRange"
+              type="daterange"
+              align="right"
+              value-format="YYYY-MM-DD"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="handleDateChange">
+             </el-date-picker>
+        </el-form-item>
+        <el-form-item label="实际归还日期" v-auth="'seal.return'">
+          <el-date-picker
+            v-model="localForm.actual_return_date"
+            type="date"
+            align="right"
+            value-format="YYYY-MM-DD"
+            unlink-panels
+            placeholder="选择日期"
+            >
+            </el-date-picker>
+        </el-form-item>
+        <el-form-item label="借用理由" prop="reason" >
+          <el-input 
+            type='textarea' 
+            placeholder="请输入借用理由"
+            v-model="localForm.reason" 
+            rows = '3'>
+          </el-input>
+        </el-form-item>
+      </template>
+      
+    <el-form-item label="文件内容">
+          <sc-upload-file
+            v-model="localForm.file"
+            :multiple="false"
+            :limit="1"
+            :accept="['.xlsx', '.xls','.pdf','.docx', '.doc', '.jpg', '.png', '.jpeg']"
+            @success = "fileUPSuccess"
+            >
+          <el-button type="primary" icon="el-icon-upload"> </el-button>
+        </sc-upload-file>
+      </el-form-item>
+    <el-form-item label="用印份数" prop="file_count">
+        <el-input v-model="localForm.file_count" clearable></el-input>
+      </el-form-item>
+
+    <el-form-item v-if="!isView">
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+      <el-button @click="$emit('cancel')">取消</el-button>
+    </el-form-item>
+    
+  </el-form>
+    <el-footer v-show="mode!=='show'">
+          <ticketd_b_start
+            :workflow_key="'seal'"
+            :title="ticketTitle"
+            :t_id="localForm.id"
+            :ticketId="localForm.ticket"
+            :submit_b_func="submit_b_func"
+            ref="ticketd_b_start"
+            @success="$emit('success')"
+          />
+          <el-button @click="$emit('closed')">取消</el-button>
+        </el-footer>
+    </el-main>
+    <el-aside v-if="localForm.ticket">
+           <ticketd
+            :ticketId="localForm.ticket"
+            @success="$emit('success')"
+            style="margin-top: 20px;"
+        />
+    </el-aside>
+  </el-container>
+</template>
+
+<script>
+import ticketd_b_start from "@/views/wf/ticketd_b_start.vue";
+import ticketd from '@/views/wf/ticketd.vue'
+export default {
+  props: {
+    mode: { type: String, default: "view" }, // add / edit / view
+    lending_type: { type: String, default: "outer" }, // inner / outer
+    modelValue: { type: Object, default: () => ({}) },
+  },
+
+  components: {ticketd, ticketd_b_start },
+  emits: ["update:modelValue", "submit", "cancel"],
+  data() {
+    return {
+      ticketTitle: "用印申请",
+      localForm: { ...this.modelValue },
+      timeRange: [],
+      rules: {
+        filename: [{ required: true, message: "请输入文件名称", trigger: "blur" }],
+      },
+    };
+  },
+  computed: {
+    isView() {
+      return this.mode === "view";
+    },
+  },
+   mounted() {
+    this.initTimeRange();
+  },
+  watch: {
+    // 父组件数据变动 -> 同步到本地
+    modelValue: {
+      handler(val) {
+        this.localForm = { ...val };
+        this.initTimeRange();
+      },
+      deep: true,
+    },
+     // 本地数据变动 -> 同步回父组件
+    localForm: {
+      handler(val) {
+        this.$emit("update:modelValue", val);
+      },
+      deep: true,
+    }
+  },
+  methods: {
+    onSubmit() {
+      this.$emit("submit", this.localForm);
+    },
+    handleDateChange(val) {
+        this.localForm.lending_date = val?.[0] || null
+        this.localForm.return_date = val?.[1] || null
+    },
+    async submit_b_func() {
+		    let that = this;
+        this.ticketTitle = `${this.localForm.filename}-用印申请`
+			if(that.mode == "add") {
+				let res = await that.$API.ofm.lendingseal.create.req(that.localForm);
+        
+				that.localForm.id = res.id;
+			} else if (that.mode == "edit") {
+			    await that.$API.ofm.lendingseal.update.req(that.localForm.id, that.localForm);
+			}
+		},
+    initTimeRange() {
+      if (this.localForm.lending_date && this.localForm.return_date) {
+        this.timeRange = [
+          this.localForm.lending_date,
+          this.localForm.return_date,
+        ];
+      } else {
+        this.timeRange = [];
+      }
+    },
+    fileUPSuccess(res) {
+        this.localForm.file = res?.path || ''
+    }
+  },
+};
+</script>