|
|
@@ -1,47 +1,23 @@
|
|
|
<template>
|
|
|
<div class="ele-body">
|
|
|
<el-card shadow="never" class="template-page">
|
|
|
- <el-form
|
|
|
- label-width="80px"
|
|
|
- class="ele-form-search"
|
|
|
- @keyup.enter.native="apply"
|
|
|
- @submit.native.prevent
|
|
|
- >
|
|
|
+ <el-form label-width="80px" class="ele-form-search" @keyup.enter.native="apply" @submit.native.prevent>
|
|
|
<el-row :gutter="15">
|
|
|
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
<el-form-item label="模板名称">
|
|
|
- <el-input
|
|
|
- v-model.trim="filters.keyword"
|
|
|
- clearable
|
|
|
- placeholder="请输入"
|
|
|
- />
|
|
|
+ <el-input v-model.trim="filters.keyword" clearable placeholder="请输入" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
<el-form-item label="模板类型">
|
|
|
- <el-select
|
|
|
- v-model="filters.type"
|
|
|
- clearable
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in types"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item"
|
|
|
- />
|
|
|
+ <el-select v-model="filters.type" clearable placeholder="请选择" style="width: 100%">
|
|
|
+ <el-option v-for="item in types" :key="item" :label="item" :value="item" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
<el-form-item label="状态">
|
|
|
- <el-select
|
|
|
- v-model="filters.status"
|
|
|
- clearable
|
|
|
- placeholder="请选择"
|
|
|
- style="width: 100%"
|
|
|
- >
|
|
|
+ <el-select v-model="filters.status" clearable placeholder="请选择" style="width: 100%">
|
|
|
<el-option label="已启用" value="已启用" />
|
|
|
<el-option label="已停用" value="已停用" />
|
|
|
</el-select>
|
|
|
@@ -49,59 +25,27 @@
|
|
|
</el-col>
|
|
|
<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
|
|
|
<div class="ele-form-actions">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-search"
|
|
|
- class="ele-btn-icon"
|
|
|
- @click="apply"
|
|
|
- >
|
|
|
+ <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="apply">
|
|
|
查询
|
|
|
</el-button>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-refresh"
|
|
|
- class="ele-btn-icon"
|
|
|
- @click="reset"
|
|
|
- >
|
|
|
+ <el-button type="primary" icon="el-icon-refresh" class="ele-btn-icon" @click="reset">
|
|
|
重置
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
- <ele-pro-table
|
|
|
- row-key="id"
|
|
|
- :columns="columns"
|
|
|
- :datasource="filteredTemplates"
|
|
|
- :need-page="true"
|
|
|
- :page-size="20"
|
|
|
- :cache-key="cacheKey"
|
|
|
- stripe
|
|
|
- class="template-table"
|
|
|
- @selection-change="selectedRows = $event"
|
|
|
- >
|
|
|
+ <ele-pro-table row-key="id" :columns="columns" :datasource="filteredTemplates" :need-page="true" :page-size="20"
|
|
|
+ :cache-key="cacheKey" stripe class="template-table" @selection-change="selectedRows = $event">
|
|
|
<template v-slot:toolbar>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- icon="el-icon-plus"
|
|
|
- class="ele-btn-icon"
|
|
|
- @click="openCreate"
|
|
|
- >
|
|
|
- 新增模板
|
|
|
+ <el-button type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openCreate">
|
|
|
+ 新增
|
|
|
</el-button>
|
|
|
- <el-button
|
|
|
- icon="el-icon-document-copy"
|
|
|
- class="ele-btn-icon"
|
|
|
- :disabled="selectedRows.length !== 1"
|
|
|
- @click="copyTemplate(selectedRows[0])"
|
|
|
- >
|
|
|
+ <el-button icon="el-icon-document-copy" class="ele-btn-icon" :disabled="selectedRows.length !== 1"
|
|
|
+ @click="copyTemplate(selectedRows[0])">
|
|
|
复制
|
|
|
</el-button>
|
|
|
- <el-button
|
|
|
- icon="el-icon-download"
|
|
|
- class="ele-btn-icon"
|
|
|
- @click="exportTemplates"
|
|
|
- >
|
|
|
+ <el-button icon="el-icon-download" class="ele-btn-icon" @click="exportTemplates">
|
|
|
导出
|
|
|
</el-button>
|
|
|
</template>
|
|
|
@@ -133,20 +77,10 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:action="{ row }">
|
|
|
- <el-link
|
|
|
- type="primary"
|
|
|
- :underline="false"
|
|
|
- icon="el-icon-view"
|
|
|
- @click.stop="openEdit(row, true)"
|
|
|
- >
|
|
|
+ <el-link type="primary" :underline="false" icon="el-icon-view" @click.stop="openEdit(row, true)">
|
|
|
预览
|
|
|
</el-link>
|
|
|
- <el-link
|
|
|
- type="primary"
|
|
|
- :underline="false"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click.stop="openEdit(row, false)"
|
|
|
- >
|
|
|
+ <el-link type="primary" :underline="false" icon="el-icon-edit" @click.stop="openEdit(row, false)">
|
|
|
编辑
|
|
|
</el-link>
|
|
|
<el-dropdown trigger="click" @command="handleCommand($event, row)">
|
|
|
@@ -158,9 +92,7 @@
|
|
|
<el-dropdown-item command="toggle">{{
|
|
|
row.status === "已启用" ? "停用模板" : "启用模板"
|
|
|
}}</el-dropdown-item>
|
|
|
- <el-dropdown-item command="delete" :disabled="row.usedCount > 0"
|
|
|
- >删除模板</el-dropdown-item
|
|
|
- >
|
|
|
+ <el-dropdown-item command="delete" :disabled="row.usedCount > 0">删除模板</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</template>
|
|
|
@@ -169,34 +101,22 @@
|
|
|
</template>
|
|
|
</ele-pro-table>
|
|
|
</el-card>
|
|
|
- <el-drawer
|
|
|
- :visible.sync="drawerVisible"
|
|
|
- direction="rtl"
|
|
|
- :size="drawerSize"
|
|
|
- append-to-body
|
|
|
- custom-class="template-drawer"
|
|
|
- ><template slot="title"
|
|
|
- ><div class="drawer-title">
|
|
|
- <span
|
|
|
- ><i :class="readOnly ? 'el-icon-view' : 'el-icon-edit-outline'"></i
|
|
|
- ></span>
|
|
|
+ <el-drawer :visible.sync="drawerVisible" direction="rtl" :size="drawerSize" append-to-body
|
|
|
+ custom-class="template-drawer"><template slot="title">
|
|
|
+ <div class="drawer-title">
|
|
|
+ <span><i :class="readOnly ? 'el-icon-view' : 'el-icon-edit-outline'"></i></span>
|
|
|
<div>
|
|
|
<h2>
|
|
|
{{ readOnly ? "模板预览" : editing.id ? "编辑模板" : "新增模板" }}
|
|
|
</h2>
|
|
|
<p>{{ editing.name || "完善模板基本信息与字段" }}</p>
|
|
|
</div>
|
|
|
- </div></template
|
|
|
- >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<div class="drawer-body">
|
|
|
- <el-form
|
|
|
- ref="templateForm"
|
|
|
- :model="editing"
|
|
|
- :rules="rules"
|
|
|
- label-position="top"
|
|
|
- :disabled="readOnly"
|
|
|
- class="template-form"
|
|
|
- ><section class="form-section">
|
|
|
+ <el-form ref="templateForm" :model="editing" :rules="rules" label-position="top" :disabled="readOnly"
|
|
|
+ class="template-form">
|
|
|
+ <section class="form-section">
|
|
|
<header>
|
|
|
<span><i class="el-icon-document"></i></span>
|
|
|
<div>
|
|
|
@@ -205,23 +125,13 @@
|
|
|
</div>
|
|
|
</header>
|
|
|
<div class="form-grid">
|
|
|
- <el-form-item label="模板名称" prop="name"
|
|
|
- ><el-input v-model.trim="editing.name" /></el-form-item
|
|
|
- ><el-form-item label="模板类型" prop="type"
|
|
|
- ><el-select v-model="editing.type"
|
|
|
- ><el-option
|
|
|
- v-for="item in types"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item" /></el-select
|
|
|
- ></el-form-item>
|
|
|
+ <el-form-item label="模板名称" prop="name"><el-input
|
|
|
+ v-model.trim="editing.name" /></el-form-item><el-form-item label="模板类型" prop="type"><el-select
|
|
|
+ v-model="editing.type"><el-option v-for="item in types" :key="item" :label="item"
|
|
|
+ :value="item" /></el-select></el-form-item>
|
|
|
</div>
|
|
|
- <el-form-item label="模板说明"
|
|
|
- ><el-input
|
|
|
- v-model.trim="editing.description"
|
|
|
- type="textarea"
|
|
|
- :rows="3"
|
|
|
- /></el-form-item>
|
|
|
+ <el-form-item label="模板说明"><el-input v-model.trim="editing.description" type="textarea"
|
|
|
+ :rows="3" /></el-form-item>
|
|
|
</section>
|
|
|
<section class="form-section">
|
|
|
<header>
|
|
|
@@ -230,43 +140,23 @@
|
|
|
<h3>字段配置</h3>
|
|
|
<p>设置字段类型与是否必填</p>
|
|
|
</div>
|
|
|
- <div class="field-header-stats"><span>{{ editing.fields.length }} 个字段</span><b>{{ requiredCount(editing) }} 个必填</b></div>
|
|
|
- <el-button
|
|
|
- v-if="!readOnly"
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- @click="addField"
|
|
|
- >添加字段</el-button
|
|
|
- >
|
|
|
+ <div class="field-header-stats"><span>{{ editing.fields.length }} 个字段</span><b>{{ requiredCount(editing)
|
|
|
+ }}
|
|
|
+ 个必填</b></div>
|
|
|
+ <el-button v-if="!readOnly" size="small" type="primary" plain @click="addField">添加字段</el-button>
|
|
|
</header>
|
|
|
<div class="field-list">
|
|
|
- <div
|
|
|
- v-for="(field, index) in editing.fields"
|
|
|
- :key="field.id + index"
|
|
|
- class="field-row"
|
|
|
- >
|
|
|
+ <div v-for="(field, index) in editing.fields" :key="field.id + index" class="field-row">
|
|
|
<span class="field-drag"><i class="el-icon-rank"></i></span>
|
|
|
<span class="field-index">{{ index + 1 }}</span>
|
|
|
<div class="field-main">
|
|
|
<el-input v-model.trim="field.label" size="small" placeholder="请输入字段名称" maxlength="30" />
|
|
|
<small><i class="el-icon-info"></i>{{ field.placeholder || `请输入${field.label || '字段内容'}` }}</small>
|
|
|
</div>
|
|
|
- <el-select v-model="field.type" size="small" class="field-type"
|
|
|
- ><el-option
|
|
|
- v-for="item in fieldTypes"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item" /></el-select
|
|
|
- ><el-switch
|
|
|
- v-model="field.required"
|
|
|
- active-text="必填"
|
|
|
- /><el-button
|
|
|
- v-if="!readOnly"
|
|
|
- type="text"
|
|
|
- icon="el-icon-delete"
|
|
|
- @click="removeField(index)"
|
|
|
- />
|
|
|
+ <el-select v-model="field.type" size="small" class="field-type"><el-option v-for="item in fieldTypes"
|
|
|
+ :key="item" :label="item" :value="item" /></el-select><el-switch v-model="field.required"
|
|
|
+ active-text="必填" /><el-button v-if="!readOnly" type="text" icon="el-icon-delete"
|
|
|
+ @click="removeField(index)" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
@@ -283,31 +173,23 @@
|
|
|
转正审批表<small>{{ editing.name || "未命名模板" }}</small>
|
|
|
</div>
|
|
|
<div class="preview-grid">
|
|
|
- <div
|
|
|
- v-for="field in editing.fields"
|
|
|
- :key="field.id"
|
|
|
- class="preview-field"
|
|
|
- >
|
|
|
+ <div v-for="field in editing.fields" :key="field.id" class="preview-field">
|
|
|
<label><i v-if="field.required">*</i>{{ field.label }}</label>
|
|
|
<div class="preview-input">{{ field.placeholder }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </section></el-form
|
|
|
- >
|
|
|
+ </section>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
<div class="drawer-footer">
|
|
|
<div>
|
|
|
- <el-button @click="drawerVisible = false">关闭</el-button
|
|
|
- ><el-button v-if="readOnly" type="primary" @click="readOnly = false"
|
|
|
- >编辑</el-button
|
|
|
- ><el-button v-if="!readOnly" @click="save">保存</el-button
|
|
|
- ><el-button v-if="!readOnly" type="primary" @click="saveAndEnable"
|
|
|
- >保存并启用</el-button
|
|
|
- >
|
|
|
+ <el-button @click="drawerVisible = false">关闭</el-button><el-button v-if="readOnly" type="primary"
|
|
|
+ @click="readOnly = false">编辑</el-button><el-button v-if="!readOnly" @click="save">保存</el-button><el-button
|
|
|
+ v-if="!readOnly" type="primary" @click="saveAndEnable">保存并启用</el-button>
|
|
|
</div>
|
|
|
- </div></el-drawer
|
|
|
- >
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -390,9 +272,9 @@ export default {
|
|
|
label: "平均字段数",
|
|
|
value: this.templates.length
|
|
|
? Math.round(
|
|
|
- this.templates.reduce((s, x) => s + x.fields.length, 0) /
|
|
|
- this.templates.length,
|
|
|
- )
|
|
|
+ this.templates.reduce((s, x) => s + x.fields.length, 0) /
|
|
|
+ this.templates.length,
|
|
|
+ )
|
|
|
: 0,
|
|
|
note: "保持申请信息完整",
|
|
|
icon: "el-icon-s-operation",
|
|
|
@@ -553,8 +435,4 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style
|
|
|
- src="../../../../styles/views/regularizationTemplate/index.scss"
|
|
|
- scoped
|
|
|
- lang="scss"
|
|
|
-></style>
|
|
|
+<style src="../../../../styles/views/regularizationTemplate/index.scss" scoped lang="scss"></style>
|