|
|
|
@ -0,0 +1,224 @@ |
|
|
|
<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> |