提交

src/views/finance/expense/components/OfficeExpense/OfficeDialog.vue

@@ -0,0 +1,190 @@
+<template>
+  <el-dialog v-if="show" title="办公费用报销" :visible.sync="show" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="报销人" prop="createUser">
+        <el-select v-model="form.createUser" placeholder="请选择" filterable clearable>
+          <el-option v-for="dict in userOptions" :key="dict.id" :label="dict.name" :value="dict.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="报销项目" prop="expenseType">
+        <el-input v-model="form.expenseType" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="日期" prop="expenseDate">
+        <el-date-picker v-model="form.expenseDate" value-format="yyyy-MM-dd" type="date" />
+      </el-form-item>
+      <el-form-item label="报销金额" prop="money">
+        <el-input v-model="form.money" placeholder="请输入" type="number" />
+      </el-form-item>
+      <el-form-item label="发票" prop="files">
+        <el-upload class="avatar-uploader" accept="image/*" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+          <img v-if="form.files" :src="form.files" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请输入" />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer">
+      <!--有权限 且 新增或修改时展示 -->
+      <!-- <el-button type="primary" v-if="form.state==0 || form.state==3" v-hasPermi="['finance:expense:account:add', 'finance:expense:account:edit']" @click="handleSave(0)">保存</el-button> -->
+      <el-button type="primary" v-if="form.state==0 || form.state==3" v-hasPermi="['finance:expense:account:add', 'finance:expense:account:edit']" @click="handleSave(1)">提交</el-button>
+      <!--有权限 且 审核时展示 -->
+      <el-button type="primary" v-if="form.state==1" v-hasPermi="['finance:expense:account:check']" @click="handleCheck(2)">通过</el-button>
+      <el-button type="primary" v-if="form.state==1" v-hasPermi="['finance:expense:account:check']" @click="handleCheck(3)">驳回</el-button>
+      <el-button @click="show = false">关闭</el-button>
+    </span>
+  </el-dialog>
+
+</template>
+  
+  <script>
+
+import { addExpense, updateExpense, checkExpense } from '@/api/finance/expense/officeExpense'
+
+export default {
+  props: {
+    userOptions: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      show: false,
+      showColumns: [],
+      form: {
+        createUser: undefined,
+        expenseDate: undefined,
+        expenseType: undefined,
+        money: undefined,
+        remark: undefined,
+        files: undefined,
+        state: 0
+      },
+      rules: {
+        createUser: { required: true, message: '请选择', trigger: 'blur' },
+        expenseType: { required: true, message: '请输入', trigger: 'blur' },
+        expenseDate: { required: true, message: '请输入', trigger: 'blur' },
+        money: { required: true, message: '请输入', trigger: 'blur' },
+        account: { required: true, message: '请输入', trigger: 'blur' }
+      },
+    };
+  },
+  methods: {
+    init(data) {
+      this.$nextTick(() => {
+        this.resetForm();
+        if (data) {
+          this.form = this.deepClone(data);
+          // this.$refs['form'].resetFields();
+        }
+        this.show = true
+      });
+    },
+    resetForm() {
+      this.form = {
+        createUser: undefined,
+        expenseDate: undefined,
+        expenseType: undefined,
+        money: undefined,
+        remark: undefined,
+        state: 0
+      }
+    },
+    handleSave(state) {
+      this.form.state = state;
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+
+          if (state == 1) {
+            this.$confirm('提交后将进入审核阶段，是否提交确认提交?', '警告', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+              .then((res) => {
+                this.handleExpenseSave();
+              })
+              .catch(function () { });
+          } else {
+            this.handleExpenseSave();
+          }
+        }
+      });
+    },
+    handleExpenseSave() {
+      // 提交申请
+      if (this.form.expenseId) {
+        updateExpense(this.form).then(resp => {
+          if (resp.code == 200) {
+            this.$message.success('修改成功');
+            this.$emit('refreshDataList');
+            this.show = false;
+          }
+        })
+      } else {
+        addExpense(this.form).then(resp => {
+          if (resp.code == 200) {
+            this.$message.success('新增成功');
+            this.$emit('refreshDataList');
+            this.show = false;
+          }
+        })
+      }
+    },
+
+    handleCheck(state) {
+      this.form.state = state;
+      checkExpense(this.form).then(resp => {
+        if (resp.code == 200) {
+          this.$message.success('审核成功');
+          this.$emit('refreshDataList');
+          this.show = false;
+        }
+      })
+    },
+    handleAvatarSuccess(res, file) {
+      console.log(file)
+      this.form.files = URL.createObjectURL(file.raw);
+    },
+    beforeAvatarUpload(file) {
+      const isLt2M = file.size / 1024 / 1024 < 10;
+      if (!isLt2M) {
+        this.$message.error('上传文件大小不能超过 10MB!');
+      }
+      return isLt2M;
+    }
+  }
+
+}
+
+  </script>
+  
+  <style lang="scss" scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+