删除菜单

src/views/instance/components/TemplateEndorsementDialog.vue

+<template>
+  <el-dialog
+    class="TemplateEndorsementDialog"
+    title="加签"
+    :visible.sync="endorsementDialogFormVisible"
+    :before-close="beforeClose"
+    @closed="resetForm"
+  >
+    <div class="main-dialog-content">
+      <el-form
+        ref="dialogSearchForm"
+        size="small"
+        :inline="true"
+        :model="dialogSearchForm"
+        label-width="80px"
+      >
+        <el-form-item label="部门">
+          <el-input v-model.trim="dialogSearchForm.department" :maxlength="30" />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model.trim="dialogSearchForm.department" :maxlength="30" />
+        </el-form-item>
+        <el-button type="primary" size="small">查 询</el-button>
+      </el-form>
+      <el-table
+        ref="multipleTable"
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        height="200px"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="department" label="部门" show-overflow-tooltip />
+        <el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" width="120" />
+      </el-table>
+      <el-pagination
+        class="my-right-pagination"
+        background
+        layout="prev, pager, next"
+        :total="1000"
+      />
+      <el-form ref="form" :model="submitForm" label-width="80px">
+        <el-form-item label="加签类型">
+          <el-radio v-model="submitForm.type" label="1">前加签</el-radio>
+          <el-radio v-model="submitForm.type" label="2">后加签</el-radio>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary">确 定</el-button>
+      <el-button @click="closeDialog">取 消</el-button>
+
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'TemplateEndorsementDialog',
+  components: {},
+  props: {
+    // 控制dialog是否能显示
+    visible: {
+      type: Boolean,
+      require: true
+    }
+  },
+  data() {
+    return {
+      // 控制显隐
+      endorsementDialogFormVisible: false,
+      // 表单标签宽度
+      formLabelWidth: '100px',
+      // 条件查询表单
+      dialogSearchForm: {
+        // 部门
+        department: '',
+        // 人员名称
+        name: ''
+      },
+      // 表格数据
+      tableData: [
+        {
+          name: '李逍遥',
+          department: '网络办'
+        },
+        {
+          name: '王小虎',
+          department: '政治部'
+        }
+      ],
+      // 需要提交的表单
+      submitForm: {
+        // 加签类型
+        type: '1',
+      },
+      // 多选选中的数据
+      multipleSelection: []
+    }
+  },
+  computed: {},
+  watch: {
+    visible: {
+      handler(newVal) {
+        this.endorsementDialogFormVisible = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    /**
+     * @author WangXinYu
+     * @describe 关闭模态框前的回调
+     **/
+    beforeClose(done) {
+      this.$emit('update:visible', false)
+      done()
+    },
+    /**
+     * @author WangXinYu
+     * @describe 重置表单
+     **/
+    resetForm() {},
+    /**
+     * @author WangXinYu
+     * @describe 关闭模态框
+     **/
+    closeDialog() {
+      this.$emit('update:visible', false)
+    },
+    /**
+    * @author WangXinYu
+    * @describe 表格选中的时候 触发事件
+    * @param {Array} val 多选选中的数组
+    **/
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.TemplateEndorsementDialog {
+  .my-right-pagination {
+    text-align: right;
+    margin-top: 8px;
+  }
+}
+</style>

src/views/instance/components/TemplateRejectDialog.vue

+<template>
+  <el-dialog
+    class="rejectDialog"
+    title="拒绝"
+    :visible.sync="rejectDialogFormVisible"
+    :before-close="beforeClose"
+    @closed="resetForm"
+  >
+    <el-form :model="rejectForm">
+      <el-form-item label="拒绝备注" :label-width="formLabelWidth">
+        <el-input
+          v-model="rejectForm.remark"
+          :maxlength="30"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          placeholder="请输入拒绝备注"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">取 消</el-button>
+      <el-button
+        type="primary"
+        @click="onSubmit"
+      >确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'RejectDialog',
+  components: {},
+  props: {
+    // 控制dialog是否能显示
+    visible: {
+      type: Boolean,
+      require: true
+    }
+  },
+  data() {
+    return {
+      // 控制显隐
+      rejectDialogFormVisible: false,
+      // 表单标签宽度
+      formLabelWidth: '100px',
+      // 表单数据
+      rejectForm: {
+        remark: ''
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    visible: {
+      handler(newVal) {
+        this.rejectDialogFormVisible = newVal
+      },
+      immediate: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    /**
+    * @author WangXinYu
+    * @describe 关闭模态框前的回调
+    **/
+    beforeClose(done) {
+      this.$emit('update:visible', false)
+      done()
+    },
+    /**
+    * @author WangXinYu
+    * @describe 重置表单
+    **/
+    resetForm() {
+      this.rejectForm = {
+        remark: ''
+      }
+    },
+    /**
+    * @author WangXinYu
+    * @describe 关闭模态框
+    **/
+    closeDialog() {
+      this.$emit('update:visible', false)
+    },
+    /**
+    * @author WangXinYu
+    * @describe 处理确定事件
+    **/
+    onSubmit() {
+      this.$emit('onConfirm', this.rejectForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.rejectDialog {
+}
+</style>