|
|
@@ -1,19 +1,443 @@
|
|
|
<template>
|
|
|
<div class="ValidationTemplate">
|
|
|
- 验证模板管理
|
|
|
+ <div class="ValidationTemplate1">
|
|
|
+ <div class="ValidationTemplate1-L">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="dialog1=true">新增模板</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="ValidationTemplate1-R">
|
|
|
+ <div class="ValidationTemplate1-Rtx">
|
|
|
+ 搜索：
|
|
|
+ </div>
|
|
|
+ <el-input v-model="page.name" placeholder="请输入模板名称" @keyup.enter.native="search" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="ValidationTemplate2">
|
|
|
+ <el-table :data="tableData" border size="small">
|
|
|
+ <el-table-column label="模板名称" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="模板排序" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.name }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-button size="mini" @click="handlelabel(scope.row)">标签</el-button>
|
|
|
+ <el-button slot="reference" size="mini" @click="handleEdit(scope.row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button slot="reference" size="mini" type="danger" @click="handleDelete(scope.row)">删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="ValidationTemplate3">
|
|
|
+ <el-pagination @current-change="handleCurrentChange" :current-page="page.pagez" :page-size="page.page_size"
|
|
|
+ layout="total, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-drawer title="新增模板" :visible.sync="dialog1" direction="rtl" :wrapperClosable="false" ref="drawer">
|
|
|
+ <div class="demo-drawers">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="模板名称" :label-width="LabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="LabelWidth">
|
|
|
+ <el-button type="primary" @click="$refs.drawer.closeDrawer()">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="dialog1=false">取 消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer title="编辑模板" :visible.sync="dialog2" direction="rtl" :wrapperClosable="false" ref="drawer">
|
|
|
+ <div class="demo-drawers">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="模板名称" :label-width="LabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模板序号" :label-width="LabelWidth">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="LabelWidth">
|
|
|
+ <el-button type="primary" @click="$refs.drawer.closeDrawer()">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="dialog2=false">取 消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer title="标签列表" :visible.sync="Drawer" direction="rtl" :wrapperClosable="false" ref="drawer" size="90%">
|
|
|
+ <div class="demo-drawers">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="NewinnerDrawer">添加标签</el-button>
|
|
|
+ <div style="margin-top: 10px;">
|
|
|
+ <el-table :data="tableData" border size="small">
|
|
|
+ <el-table-column label="标签名称" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数据类型" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="标签" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown @command="commands">
|
|
|
+ <div class="el-dropdown-link dropdown-links" style="">
|
|
|
+ <el-button type="primary" plain size="small">更多操作</el-button>
|
|
|
+ </div>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="a">编辑</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="b">时间流程</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="c">删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px;">
|
|
|
+ <el-pagination @current-change="handleCurrentChange111" :current-page="page1.pagez"
|
|
|
+ :page-size="page1.page_size" layout="total, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-drawer title="时间流程" :append-to-body="true" :visible.sync="innerDrawer1" size="70%">
|
|
|
+ <div class="demo-drawers">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="TimeNew">添加流程</el-button>
|
|
|
+ <div style="padding-top: 20px;">
|
|
|
+ <el-table :data="tableData" border size="small">
|
|
|
+ <el-table-column label="排序">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="步骤名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="对应标签">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最少时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="最多时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.date }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <el-button slot="reference" size="mini" @click="TimeEdit(scope.row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button slot="reference" size="mini" type="danger"
|
|
|
+ @click="TimeDelete(scope.row)">删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px;">
|
|
|
+ <el-pagination @current-change="handleCurrentChange111" :current-page="page1.pagez"
|
|
|
+ :page-size="page1.page_size" layout="total, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <el-drawer :title="titles1" :append-to-body="true" :visible.sync="innerDrawer3">
|
|
|
+ <!-- 时间流程按钮后的编辑 -->
|
|
|
+ <div style="padding: 20px;">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="排序" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="步骤名称" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="对映标签" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最小时间" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="最大时间" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述" label-width="70px">
|
|
|
+ <el-input type="textarea" v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="70px">
|
|
|
+ <el-button type="primary" @click="innerDrawer3=false">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="innerDrawer3=false">取 消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer :title="titles" :append-to-body="true" :visible.sync="innerDrawer2">
|
|
|
+ <!-- 时间流程按钮后的编辑 -->
|
|
|
+ <div style="padding: 20px;">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="数据类型" label-width="70px">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="来源" label-width="70px">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择活动区域">
|
|
|
+ <el-option label="区域一" value="shanghai"></el-option>
|
|
|
+ <el-option label="区域二" value="beijing"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标签名称" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="标签" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序" label-width="70px">
|
|
|
+ <el-input v-model="form.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="描述" label-width="70px">
|
|
|
+ <el-input type="textarea" v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传" label-width="70px">
|
|
|
+ <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label-width="70px">
|
|
|
+ <el-button type="primary" @click="innerDrawer2=false">
|
|
|
+ 确 定
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="innerDrawer2=false">取 消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name:'ValidationTemplate',
|
|
|
+ name: 'ValidationTemplate',
|
|
|
data() {
|
|
|
- return{
|
|
|
- vlaue:''
|
|
|
+ return {
|
|
|
+ LabelWidth: "70px",
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ region: '',
|
|
|
+ paw: '',
|
|
|
+ },
|
|
|
+ titles: '',
|
|
|
+ titles1: '',
|
|
|
+ Drawer: false, //标签
|
|
|
+ dialog1: false, //新增
|
|
|
+ dialog2: false, //编辑
|
|
|
+ innerDrawer1: false, //时间流程
|
|
|
+ innerDrawer2: false, //时间流程界面的编辑新增
|
|
|
+ innerDrawer3: false, //时间流程新增
|
|
|
+ total: 30,
|
|
|
+ page: {
|
|
|
+ pagez: 1,
|
|
|
+ page_size: 10,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ page1: {
|
|
|
+ pagez: 1,
|
|
|
+ page_size: 10,
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ tableData: [{
|
|
|
+ date: '冷库',
|
|
|
+ name: '1',
|
|
|
+ }, {
|
|
|
+ date: '车载',
|
|
|
+ name: '2',
|
|
|
+ }, {
|
|
|
+ date: 'A箱',
|
|
|
+ name: '3',
|
|
|
+ }, {
|
|
|
+ date: 'A箱',
|
|
|
+ name: '4',
|
|
|
+ }, {
|
|
|
+ date: 'B箱',
|
|
|
+ name: '5',
|
|
|
+ }],
|
|
|
}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ TimeEdit(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.innerDrawer3 = true
|
|
|
+ this.titles1 = '编辑时间流程'
|
|
|
+ },
|
|
|
+ TimeNew() {
|
|
|
+ this.innerDrawer3 = true
|
|
|
+ this.titles1 = '新增时间流程'
|
|
|
+ },
|
|
|
+ TimeDelete(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ }).then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ NewinnerDrawer() {
|
|
|
+ this.titles = '添加'
|
|
|
+ this.innerDrawer2 = true
|
|
|
+ },
|
|
|
+ commands(e) {
|
|
|
+ console.log(e)
|
|
|
+ switch (e) {
|
|
|
+ case 'a':
|
|
|
+ this.titles = '编辑'
|
|
|
+ this.innerDrawer2 = true
|
|
|
+ break
|
|
|
+ case 'b':
|
|
|
+ this.innerDrawer1 = true
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ }).then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCurrentChange111(val) {
|
|
|
+ this.page1.pagez = val
|
|
|
+ console.log('当前页', this.page);
|
|
|
+ },
|
|
|
+ handlelabel(val) {
|
|
|
+ console.log('标签', val);
|
|
|
+ this.Drawer = true
|
|
|
+ },
|
|
|
+ handleEdit(val) {
|
|
|
+ this.dialog2 = true
|
|
|
+ console.log('编辑', val);
|
|
|
+ },
|
|
|
+ handleDelete(val) {
|
|
|
+ console.log('删除', val);
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ center: true
|
|
|
+ }).then(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page.pagez = val
|
|
|
+ console.log('当前页', this.page);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .demo-drawers {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-upload-dragger {
|
|
|
+ width: 100% !important;
|
|
|
+ padding: 0 30px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ValidationTemplate {
|
|
|
+ .ValidationTemplate1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ValidationTemplate1-L {}
|
|
|
+
|
|
|
+ .ValidationTemplate1-R {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .ValidationTemplate1-Rtx {
|
|
|
+ min-width: 45px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #909399;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ValidationTemplate2 {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ValidationTemplate3 {
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
YangJian0701
