You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
224 lines
6.9 KiB
224 lines
6.9 KiB
<template>
|
|
<div class="app-container template-page">
|
|
<el-form :model="searchForm" ref="searchForm" :inline="true">
|
|
<el-form-item label="名称：" prop="name">
|
|
<el-input v-model="searchForm.name" :placeholder="$t('form.placeholderInput')" clearable style="width: 150px"
|
|
@keyup.enter.native="search" />
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
|
|
<el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
|
|
|
|
<el-button type="primary" plain icon="el-icon-plus" @click="edit(null)">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-table v-loading="loading" :data="list">
|
|
<el-table-column label="id" align="center" prop="id" />
|
|
<el-table-column label="名称" align="center" prop="name" />
|
|
<el-table-column label="创建时间" align="center" prop="createTime" />
|
|
<el-table-column :label="$t('form.operate')" fixed="right" align="center" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button>
|
|
<el-button type="text" @click="del(scope.row)">删除</el-button>
|
|
<el-button type="text" @click="selectStep(scope.row)">设置步骤</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
|
|
@pagination="getList" />
|
|
|
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="infoDialog.title" :visible.sync="infoDialog.visible" width="800px"
|
|
append-to-body>
|
|
<el-form ref="infoDialogForm" :model="infoDialog.formData" :rules="infoDialog.rules" label-width="180px">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="名称：" prop="name">
|
|
<el-input v-model="infoDialog.formData.name" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="save">确 定</el-button>
|
|
<el-button @click="infoDialog.visible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="stepDialog.title" :visible.sync="stepDialog.visible" width="800px"
|
|
append-to-body>
|
|
|
|
<el-table v-loading="stepDialog.loading" :data="stepDialog.stepList" ref="multipleTable" @selection-change="handleSelectionChange" height="400px">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column label="id" align="center" prop="id" />
|
|
<el-table-column label="编号" align="center" prop="sn" />
|
|
<el-table-column label="名称" align="center" prop="name" />
|
|
<el-table-column label="创建时间" align="center" prop="createTime" />
|
|
</el-table>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="saveStep">确 定</el-button>
|
|
<el-button @click="stepDialog.visible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { step_list, stepGroup_list, stepGroup_info, stepGroup_save, stepGroup_delete } from "@/api/business/step/step";
|
|
const EmptyDialogData = {
|
|
id: '',
|
|
name: '',
|
|
}
|
|
export default {
|
|
name: "StepGroupPage",
|
|
props: {
|
|
},
|
|
components: {
|
|
},
|
|
computed: {
|
|
},
|
|
filters: {
|
|
},
|
|
data() {
|
|
return {
|
|
searchForm: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
name: '',
|
|
},
|
|
|
|
loading: true,
|
|
total: 0,
|
|
list: [],
|
|
|
|
infoDialog: {
|
|
title: '',
|
|
visible: false,
|
|
formData: {},
|
|
|
|
rules: {
|
|
name: [
|
|
{ required: true, message:'请输入', trigger: "blur" }
|
|
],
|
|
},
|
|
},
|
|
|
|
stepDialog:{
|
|
title: '设置步骤',
|
|
visible: false,
|
|
loading:false,
|
|
|
|
stepList:[],
|
|
data:{id:'',stepIds:''},
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.loading = true;
|
|
stepGroup_list(this.searchForm).then(response => {
|
|
this.list = response.rows;
|
|
this.total = response.total;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
search() {
|
|
this.searchForm.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
reset() {
|
|
this.searchForm = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
sn: '',
|
|
name: '',
|
|
}
|
|
this.search()
|
|
},
|
|
edit(row) {
|
|
this.$refs['infoDialogForm'] && this.$refs['infoDialogForm'].resetFields()
|
|
this.infoDialog.title = '新增'
|
|
this.infoDialog.formData = _.merge({}, EmptyDialogData)
|
|
if (row && row.id) {
|
|
this.infoDialog.title = '编辑'
|
|
this.$modal.loading()
|
|
stepGroup_info({ id: row.id }).then(({ data }) => {
|
|
this.infoDialog.formData = data
|
|
}).finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
}
|
|
this.infoDialog.visible = true
|
|
},
|
|
save() {
|
|
this.$refs['infoDialogForm'].validate(valid => {
|
|
if (valid) {
|
|
this.$modal.loading()
|
|
stepGroup_save(this.infoDialog.formData).then(() => {
|
|
this.infoDialog.visible = false
|
|
this.getList()
|
|
}).finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
del(row) {
|
|
this.$confirm('确定要删除吗', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.$modal.loading()
|
|
stepGroup_delete({ id: row.id }).then(() => {
|
|
this.getList()
|
|
})
|
|
.finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
})
|
|
.catch(() => { })
|
|
},
|
|
|
|
selectStep(row){
|
|
this.stepDialog.visible = true
|
|
this.stepDialog.data = _.clone(row)
|
|
this.stepDialog.loading = true
|
|
step_list({ pageNum: 1, pageSize:9999}).then(response => {
|
|
this.stepDialog.stepList = response.rows
|
|
setTimeout(() => {
|
|
let cuurStepIdList = this.stepDialog.data.stepIds ? this.stepDialog.data.stepIds.split(',') : []
|
|
this.stepDialog.stepList.forEach(item => {
|
|
this.$refs.multipleTable.toggleRowSelection(item,cuurStepIdList.indexOf(item.id+'')>-1)
|
|
});
|
|
this.stepDialog.loading = false
|
|
}, 1000);
|
|
}).catch(() => {
|
|
this.stepDialog.loading = false
|
|
})
|
|
},
|
|
handleSelectionChange(val){
|
|
if(!this.stepDialog.loading){
|
|
this.stepDialog.data.stepIds = _.map(val, 'id').join(',')
|
|
}
|
|
},
|
|
saveStep(){
|
|
this.$modal.loading()
|
|
stepGroup_save(this.stepDialog.data).then(() => {
|
|
this.stepDialog.visible = false
|
|
this.getList()
|
|
}).finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss"></style>
|