factory_web/src/views/bi/report_form.vue

160 lines
4.2 KiB
Vue

<template>
<el-dialog
:title="titleMap[mode]"
v-model="visible"
:size="1000"
destroy-on-close
@closed="$emit('closed')"
>
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px">
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
:disabled="mode == 'show'"
label-width="80px"
>
<el-row>
<el-col :md="8" :sm="12" :xs="24">
<el-form-item label="名称" prop="name">
<el-input
v-model="form.name"
style="width:100%"
type="text"
clearable
></el-input>
</el-form-item>
</el-col>
<el-col :md="24" :sm="24" :xs="24">
<el-form-item label="标识">
<el-input
v-model="form.code"
type="text"
></el-input>
</el-form-item>
</el-col>
<el-col :md="24" :sm="24" :xs="24">
<el-form-item label="数据集">
<el-transfer v-model="form.datasets" :data="datasetOptions" :titles="['可选', '已选']" filterable/>
</el-form-item>
</el-col>
<el-col :md="24" :sm="24" :xs="24">
<el-form-item label="js方法">
<el-input
v-model="form.js_function"
clearable
type="textarea"
:rows="4"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-main>
<el-footer style="text-align: right;">
<el-button type="primary" :loading="isSaveing" @click="submit"
>保存</el-button
>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-dialog>
</template>
<script>
export default {
emits: ["success", "closed"],
data() {
return {
datasetOptions:[],
loading: false,
mode: "add",
titleMap: {
add: "新增",
edit: "编辑",
show: "查看",
},
form: {},
rules: {
name: [{ required: true, message: "请输入" }],
},
visible: false,
isSaveing: false,
selectionFilters: [],
setFiltersVisible: false,
belong_dept_options: []
};
},
mounted() {
this.getDatasets()
},
methods: {
getDatasets() {
this.$API.bi.dataset.list.req({page:0}).then(res=>{
let datasetOptions = []
for(let i=0; i<res.length; i++){
datasetOptions.push({key: res[i].id, label: res[i].name, disabled: false})
}
this.datasetOptions = datasetOptions
})
},
//显示
open(mode = "add") {
this.mode = mode;
this.visible = true;
return this;
},
//表单提交方法
submit() {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
try {
var res;
if (this.mode == "add") {
res = await this.$API.bi.report.create.req(this.form);
} else if (this.mode == "edit") {
res = await this.$API.bi.report.update.req(
this.form.id,
this.form
);
}
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
return res;
} catch (err) {
//可以处理校验错误
this.isSaveing = false;
return err;
}
}
});
},
//表单注入数据
setData(data) {
// this.loading = true
// const params = {
// id: data.id
// }
// setTimeout(async ()=>{
// var res = await this.$API.system.table.info.get(params)
// this.loading = false
// this.form = res.data
// },400)
Object.assign(this.form, data);
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script>
<style>
</style>