parent
385ae1a154
commit
158dba5e1b
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
append-to-body
|
||||
fullscreen
|
||||
center
|
||||
>
|
||||
<el-form
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
ref="ruleForm"
|
||||
label-width="170px"
|
||||
label-position="right"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<form-title title="基本信息"></form-title>
|
||||
|
||||
<div class="grid-container">
|
||||
<el-form-item
|
||||
:label="item.label"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:class="item.type == 'textarea' ? 'full-width' : ''"
|
||||
>
|
||||
<el-select
|
||||
v-if="item.type == 'autocomplete'"
|
||||
v-model="ruleForm[item.key]"
|
||||
filterable
|
||||
remote
|
||||
placeholder="请输入关键词"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.nickName"
|
||||
:value="item.nickName"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 输入框 -->
|
||||
<el-input
|
||||
v-if="item.type == 'input'"
|
||||
v-model="ruleForm[item.key]"
|
||||
:placeholder="'请输入' + item.label"
|
||||
></el-input>
|
||||
<!-- 选择框 -->
|
||||
<el-select
|
||||
v-if="item.type == 'select'"
|
||||
v-model="ruleForm[item.key]"
|
||||
:placeholder="'请选择' + item.label"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.type[item.dict]"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- 日期框 -->
|
||||
<el-date-picker
|
||||
v-if="item.type == 'date'"
|
||||
v-model="ruleForm[item.key]"
|
||||
type="date"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
<!-- 多行文本框 -->
|
||||
<el-input
|
||||
v-if="item.type == 'textarea'"
|
||||
type="textarea"
|
||||
resize="none"
|
||||
placeholder="请输入系统简介"
|
||||
:rows="5"
|
||||
v-model="ruleForm[item.key]"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="open = false" size="medium">返 回</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="medium"
|
||||
@click="submit()"
|
||||
v-show="!disabled"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
assetMiniPrograms,
|
||||
miniProgramsInfo,
|
||||
unitAllList,
|
||||
} from "@/api/auditPagesApi/index";
|
||||
import { formData, formRules } from "./programDialog.js";
|
||||
import formTitle from "../formTitle.vue";
|
||||
import { checkRole } from "@/utils/permission"; // 权限判断函数
|
||||
export default {
|
||||
dicts: [
|
||||
"app_xzqh",
|
||||
"app_sshy",
|
||||
"app_zdhy",
|
||||
"gzh_state",
|
||||
"gzh_rzzt",
|
||||
"gzh_rzlx",
|
||||
"email_state",
|
||||
],
|
||||
components: { formTitle },
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options: [],
|
||||
list: formData,
|
||||
title: "",
|
||||
open: false,
|
||||
ruleForm: {},
|
||||
rules: formRules,
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.remoteMethod();
|
||||
},
|
||||
methods: {
|
||||
/** 打开对话框 */
|
||||
openDialog(id, disabled) {
|
||||
if (!id) {
|
||||
this.title = "新增小程序资产";
|
||||
this.open = true;
|
||||
this.resetForm("ruleForm");
|
||||
} else {
|
||||
this.getInfo(id);
|
||||
this.disabled = disabled;
|
||||
}
|
||||
},
|
||||
|
||||
/**详情 */
|
||||
async getInfo(id) {
|
||||
let res = await miniProgramsInfo(id);
|
||||
this.title = "修改小程序资产";
|
||||
this.open = true;
|
||||
this.resetForm("ruleForm");
|
||||
this.ruleForm = res.data;
|
||||
},
|
||||
|
||||
/**单位名称模糊查询 */
|
||||
async remoteMethod(query) {
|
||||
let res = await unitAllList({ nickName: query });
|
||||
this.options = res.data;
|
||||
if (this.options.length == 0) {
|
||||
this.ruleForm.ssdw = "";
|
||||
this.$message.error("请输入正确的企业");
|
||||
}
|
||||
},
|
||||
|
||||
/**提交 */
|
||||
submit() {
|
||||
let isUnit = checkRole(["unit"]);
|
||||
const portion = ["ssdw", "xcxmc"];
|
||||
let index = 0;
|
||||
if (isUnit) {
|
||||
// 全部校验
|
||||
this.$refs["ruleForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitFu();
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//部分校验
|
||||
this.$refs["ruleForm"].validateField(portion, (errors) => {
|
||||
if (errors) {
|
||||
console.log("部分字段验证失败:", errors);
|
||||
} else {
|
||||
index++;
|
||||
if (index == portion.length) {
|
||||
this.submitFu();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
async submitFu() {
|
||||
this.loading = true;
|
||||
if (this.ruleForm.id != null) {
|
||||
await assetMiniPrograms("put", this.ruleForm);
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
} else {
|
||||
await assetMiniPrograms("post", this.ruleForm);
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
}
|
||||
this.loading = false;
|
||||
this.open = false;
|
||||
this.$emit("finish");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
/* 设置网格布局为一行两列 */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
/* 定义强制占一行的类样式 */
|
||||
.full-width {
|
||||
/* 让元素跨越两列，从而占满一行 */
|
||||
grid-column: span 2;
|
||||
}
|
||||
::v-deep .el-select,
|
||||
.el-cascader,
|
||||
.el-date-editor,
|
||||
.el-autocomplete {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue