|
|
@@ -0,0 +1,571 @@
|
|
|
+<!-- 流程模型 -->
|
|
|
+<template>
|
|
|
+ <div class="recruitmentPlanBox">
|
|
|
+ <div class="header">
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ :model="planHeaderForm"
|
|
|
+ class="demo-form-inline"
|
|
|
+ ref="planHeaderForm"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ label="表名称:"
|
|
|
+ prop="name"
|
|
|
+ style="margin-left: 20px; margin-top: 20px"
|
|
|
+ >
|
|
|
+ <el-input v-model="planHeaderForm.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表描述:" prop="cardId" style="margin-top: 20px">
|
|
|
+ <el-input v-model="planHeaderForm.cardId"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表时间:" style="margin-top: 20px">
|
|
|
+ <el-date-picker
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ @click="onSearch"
|
|
|
+ style="margin-left: 10px; margin-top: 20px"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ round
|
|
|
+ icon="el-icon-refresh"
|
|
|
+ @click="resetForm('planHeaderForm')"
|
|
|
+ style="margin-left: 10px; margin-top: 20px"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="con">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-download"
|
|
|
+ style="
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: rgb(99 164 207);
|
|
|
+ border-color: rgb(99 164 207);
|
|
|
+ color: #ffffff;
|
|
|
+ "
|
|
|
+ >生成</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-upload2"
|
|
|
+ style="
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: #1ab394;
|
|
|
+ border-color: #1ab394;
|
|
|
+ color: #ffffff;
|
|
|
+ "
|
|
|
+ >导入</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-edit-outline"
|
|
|
+ style="
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: rgb(97 217 173);
|
|
|
+ border-color: rgb(97 217 173);
|
|
|
+ color: #ffffff;
|
|
|
+ "
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-close"
|
|
|
+ style="
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: rgb(235 144 144);
|
|
|
+ border-color: rgb(235 144 144);
|
|
|
+ color: #ffffff;
|
|
|
+ "
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- 右侧栏 -->
|
|
|
+ <div class="con cons">
|
|
|
+ <div class="b_r b_ro">
|
|
|
+ <i class="el-icon-search" title="搜索"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r">
|
|
|
+ <i class="el-icon-refresh" title="刷新"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r" @click="show = !show">
|
|
|
+ <i class="el-icon-notebook-2" title="切换"></i>
|
|
|
+ </div>
|
|
|
+ <div class="b_r b_rs">
|
|
|
+ <el-dropdown :hide-on-click="false">
|
|
|
+ <div class="b_rf">
|
|
|
+ <i class="el-icon-s-grid" title="列"></i>
|
|
|
+ <i class="el-icon-caret-bottom" title="列"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧栏 -->
|
|
|
+ <!-- 下拉菜单 -->
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.bh">编号</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.xh">序号</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.bmc">表名称</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.bms">表描述</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.stlmc">实体类名称</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.cjss">创建时间</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.gxss">更新时间</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-checkbox v-model="showColumn.post">操作</el-checkbox>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <!-- 下拉菜单 -->
|
|
|
+ </div>
|
|
|
+ <plan-con></plan-con>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 右侧栏 -->
|
|
|
+ <!-- 切换前列表 -->
|
|
|
+ <el-table
|
|
|
+ v-show="show"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="tableData"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ @select="handleSelectionChange"
|
|
|
+ @select-all="handleSelectionChangeall"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection"> </el-table-column>
|
|
|
+ <el-table-column label="编号" v-if="showColumn.bh">
|
|
|
+ <template slot-scope="scope">{{ scope.row.bh }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="序号" v-if="showColumn.xh">
|
|
|
+ <template slot-scope="scope">{{ scope.row.xh }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="表名称" v-if="showColumn.bmc">
|
|
|
+ <template slot-scope="scope">{{ scope.row.bmc }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="表描述" v-if="showColumn.bms">
|
|
|
+ <template slot-scope="scope">{{ scope.row.bms }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="实体类名称" v-if="showColumn.stlmc">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" v-if="showColumn.cjss">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="更新时间" v-if="showColumn.gxss">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="num"
|
|
|
+ label="操作"
|
|
|
+ width="300"
|
|
|
+ v-if="showColumn.post"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="handledeploy(scope.$index, scope.row)"
|
|
|
+ >部署</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="warning"
|
|
|
+ @click="handleExport(scope.$index, scope.row)"
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="danger"
|
|
|
+ @click="handleDelete(scope.$index, scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 切换前列表 -->
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage4"
|
|
|
+ :page-sizes="[10, 20, 30, 40]"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="100"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 切换后列表 -->
|
|
|
+ <div v-show="!show">
|
|
|
+ <div v-for="(item, index) in tableData" class="col-md" :key="index">
|
|
|
+ <el-checkbox
|
|
|
+ v-model="item.show"
|
|
|
+ style="width: 100%; white-space: normal"
|
|
|
+ @change="handleCheckedCitiesChange(item)"
|
|
|
+ class="checkboxs"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.inviteid">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">ID</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.date }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.serial">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">KEY</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.key }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.organid">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">名称</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.date }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.wanttype">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">版本</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.name }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.wantyear">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">创建时间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.type }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.planwant">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">最后更新时间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.year }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.wantnumber">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">元数据</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.number }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="grid-text" v-if="showColumn.post">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple">操作</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="grid-content bg-purple">{{ item.nums }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 切换后列表 -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentPage1: 5,
|
|
|
+ currentPage2: 5,
|
|
|
+ currentPage3: 5,
|
|
|
+ currentPage4: 1,
|
|
|
+ visible: false,
|
|
|
+ show: true, //表单切换
|
|
|
+ planHeaderForm: {
|
|
|
+ unit: "",
|
|
|
+ years: "",
|
|
|
+ cardId: "",
|
|
|
+ },
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ nh: "123223",
|
|
|
+ xh: "1",
|
|
|
+ bmc: "岗位设置流程",
|
|
|
+ bms: "2222222221",
|
|
|
+ stlmc: "6667766",
|
|
|
+ cjss: "2020-07-14 13:45:59",
|
|
|
+ gxsj: "2020-07-14 13:45:59",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ multipleSelection: [],
|
|
|
+ showColumn: {
|
|
|
+ bh: false,
|
|
|
+ xh: true,
|
|
|
+ bmc: true,
|
|
|
+ bms: true,
|
|
|
+ stlmc: true,
|
|
|
+ cjss: true,
|
|
|
+ gxss: true,
|
|
|
+ post: true,
|
|
|
+ },
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "选项1",
|
|
|
+ label: "所有",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项2",
|
|
|
+ label: "正常",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项3",
|
|
|
+ label: "作废",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods() {
|
|
|
+ // 发请求得到showColumnInitData的列的名字
|
|
|
+ if (localStorage.getItem("columnSet")) {
|
|
|
+ this.showColumn = JSON.parse(localStorage.getItem("columnSet"));
|
|
|
+ } else {
|
|
|
+ this.showColumn = {
|
|
|
+ inviteid: false,
|
|
|
+ serial: true,
|
|
|
+ organid: true,
|
|
|
+ want: true,
|
|
|
+ wanttype: true,
|
|
|
+ wantyear: true,
|
|
|
+ planwant: true,
|
|
|
+ wantnumber: true,
|
|
|
+ hired: true,
|
|
|
+ remark: true,
|
|
|
+ creator: true,
|
|
|
+ creationtime: true,
|
|
|
+ modifier: true,
|
|
|
+ modifiertime: true,
|
|
|
+ accessory: true,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeUpdate() {
|
|
|
+ if (this.show) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //在数据加载完，重新渲染表格
|
|
|
+ this.$refs["multipleTable"].doLayout();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleEdit(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handledeploy(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handleExport(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection, val) {
|
|
|
+ val.show = !val.show;
|
|
|
+ },
|
|
|
+ handleSelectionChangeall(selection) {
|
|
|
+ if (selection.length == 0) {
|
|
|
+ this.tableData.forEach((val) => {
|
|
|
+ val.show = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ selection.forEach((val) => {
|
|
|
+ val.show = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(val) {
|
|
|
+ this.$refs.multipleTable.toggleRowSelection(val);
|
|
|
+ },
|
|
|
+ saveColumn() {
|
|
|
+ localStorage.setItem("columnSet", JSON.stringify(this.showColumn));
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "contract",
|
|
|
+ components: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.recruitmentPlanBox {
|
|
|
+ height: 100%;
|
|
|
+ min-width: 1200px;
|
|
|
+}
|
|
|
+
|
|
|
+.recruitmentPlanBox .header {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.recruitmentPlanBox .con {
|
|
|
+ /* background: #ffffff; */
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ padding: 20px 0px 10px 0px;
|
|
|
+ margin-right: 20px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.cons {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.b_r {
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ border-right: none;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b_rs {
|
|
|
+ border: 1px solid #dcdcdc;
|
|
|
+ color: #000;
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 0 5px 5px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.b_ro {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.b_rf {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.b_r:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.b_rf:hover {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-bottom {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-search {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-refresh {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-notebook-2 {
|
|
|
+ padding: 10px 10px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-s-grid {
|
|
|
+ padding: 10px 0px 10px 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-bottom {
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter-active,
|
|
|
+.fade-leave-active {
|
|
|
+ transition: opacity 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.fade-enter,
|
|
|
+.fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.chenkbox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.col-md {
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-text {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-checkbox__label {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .checkboxs .el-checkbox__input {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.block {
|
|
|
+ padding: 30px 0 20px 30px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 10px 10px;
|
|
|
+}
|
|
|
+</style>
|
