zky_mandate/resource/template/vm/vue/detail-vue.template
yxh 379abd65e0 fix 1、修复虚拟树形结构ID错误问题
2、修复组件name首字母大写造成的页面缓存失败问题
    3、修复excel导出文件未关闭资源的问题
    4、更新数据权限同时支持按创建人划分(created_by)或按部门(dept_id划分)
    5、更新token自动刷新功能
2024-06-08 23:17:33 +08:00

518 lines
20 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- {{.table.TableComment}}详情抽屉 -->
{{$lens := .table.Columns|len}}
{{$businessName := .table.BusinessName | CaseCamelLower}}
{{$treeParentCode := .table.TreeParentCode}}
{{$treeCode := .table.TreeCode}}
{{$treeName := .table.TreeName}}
<div class="{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail">
<el-drawer v-model="isShowDialog" size="80%" direction="ltr">
<template #header>
<h4>{{.table.TableComment}}详情</h4>
</template>
<el-form ref="formRef" :model="formData" label-width="100px">
{{ $hasRowEnd := true }}
{{range $index, $column := .table.DetailColumns}}
{{if and (eq $column.IsRowStart true) (ne $index 0)}}
{{ $hasRowEnd = true }}
</el-row>
{{end}}
{{if or (eq $column.IsRowStart true) (eq $index 0)}}
{{ $hasRowEnd = false }}
<el-row>
{{end}}
{{if eq $column.HtmlType "input" "textarea" "radio" "checkbox" "select" "selects" "treeSelect" "treeSelects"}}
<el-col :span="{{$column.ColSpan}}">
{{if ne $column.LinkTableName ""}}
{{range $ti, $linkedTable := $.table.LinkedTables}}
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
{{if eq $column.HtmlType "selects" "checkbox" "treeSelects"}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.map((res:any)=>{return res.{{CaseCamelLower $column.LinkLabelName}}}).join(''):'' {{"}}"}}</el-form-item>
{{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.linked{{$column.GoField}}?formData.linked{{$column.GoField}}.{{CaseCamelLower $column.LinkLabelName}}:'' {{"}}"}}</el-form-item>
{{end}}
{{end}}
{{end}}
{{else if ne $column.DictType ""}}
{{if eq $column.HtmlType "checkbox" }}
<el-form-item label="{{$column.ColumnComment}}">
<el-tag class="ml-2" type="success" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
{{"{{"}} proxy.getOptionValue(item, {{$column.HtmlField}}Options,'value','label') {{"}}"}}
</el-tag>
</el-form-item>
{{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.getOptionValue({{if eq $column.TsType "boolean"}}formData.{{$column.HtmlField}}?'1':'0'{{else}}formData.{{$column.HtmlField}}{{end}}, {{$column.HtmlField}}Options,'value','label') {{"}}"}}</el-form-item>
{{end}}
{{else}}
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} formData.{{$column.HtmlField}} {{"}}"}}</el-form-item>
{{end}}
</el-col>
{{else if eq $column.HtmlType "date"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d}') {{"}}"}}</el-form-item>
</el-col>
{{else if eq $column.HtmlType "datetime"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">{{"{{"}} proxy.parseTime(formData.{{$column.HtmlField}}, '{y}-{m}-{d} {h}:{i}:{s}') {{"}}"}}</el-form-item>
</el-col>
{{else if eq $column.HtmlType "richtext"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">
<p v-html="formData.{{$column.HtmlField}}"></p>
</el-form-item>
</el-col>
{{else if eq $column.HtmlType "imagefile"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">
<el-image
style="width: 150px; height: 150px"
v-if="!proxy.isEmpty(formData.{{$column.HtmlField}})"
:src="proxy.getUpFileUrl(formData.{{$column.HtmlField}})"
fit="contain"></el-image>
</el-form-item>
</el-col>
{{else if eq $column.HtmlType "images"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">
<div class="pic-block" v-for="(img,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-image
style="width: 150px; height: 150px"
v-if="!proxy.isEmpty(img.url)"
:src="proxy.getUpFileUrl(img.url)"
fit="contain"></el-image>
</div>
</el-form-item>
</el-col>
{{else if eq $column.HtmlType "file"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-link type="primary" :underline="false"
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
</div>
</el-form-item>
</el-col>
{{else if eq $column.HtmlType "files"}}
<el-col :span="{{$column.ColSpan}}">
<el-form-item label="{{$column.ColumnComment}}">
<div class="file-block" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
<el-link type="primary" :underline="false"
:href="proxy.getUpFileUrl(item.url)" target="_blank">{{"{{"}}item.name{{"}}"}}</el-link>
</div>
</el-form-item>
</el-col>
{{else if eq $column.HtmlType "keyValue"}}
<el-form-item label="{{$column.ColumnComment}}">
<el-tag class="ml-2" v-for="(item,key) in formData.{{$column.HtmlField}}" :key="'{{$column.HtmlField}}-'+key">
{{"{{"}} item.key {{"}}"}} : {{"{{"}} item.value {{"}}"}}
</el-tag>
</el-form-item>
{{end}}
{{end}}
{{if not $hasRowEnd}}
</el-row>
{{end}}
</el-form>
</el-drawer>
</div>
</template>
{{$tokenImp := false}}
{{$imgsImp := false}}
{{$editImp := false }}
{{$fileImp := false}}
{{$getUserList:=false}}
{{range $index,$column:=.table.Columns}}
{{if eq $column.HtmlType "richtext"}}
{{$editImp = true}}
{{else if eq $column.HtmlType "imagefile"}}
{{$tokenImp = true}}
{{else if eq $column.HtmlType "images"}}
{{$imgsImp = true}}
{{else if eq $column.HtmlType "file" "files"}}
{{$fileImp = true}}
{{end}}
{{if eq $column.HtmlField "createdBy" "updatedBy"}}
{{$getUserList = true}}
{{end}}
{{end}}
<script lang="ts">
import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';
{{/*去重处理*/}}
{{$hasImports:=newArray}}
import {
list{{.table.ClassName}},
get{{.table.ClassName}},
del{{.table.ClassName}},
add{{.table.ClassName}},
update{{.table.ClassName}},
{{range $index,$column:= .table.Columns}}
{{if and $column.IsStatus $column.IsList}}
change{{$.table.ClassName}}{{$column.GoField}},
{{end}}
{{end}}
} from "/@/api/{{.modulePath}}/{{$businessName}}";
{{if $editImp}}
import GfUeditor from "/@/components/ueditor/index.vue"
{{end}}
{{if $tokenImp}}
import {getToken} from "/@/utils/gfast"
{{end}}
{{if $imgsImp}}
import uploadImg from "/@/components/uploadImg/index.vue"
{{end}}
{{if $fileImp}}
import uploadFile from "/@/components/uploadFile/index.vue"
{{end}}
import {
{{.table.ClassName}}TableColumns,
{{.table.ClassName}}InfoData,
{{.table.ClassName}}TableDataState,
{{.table.ClassName}}EditState
} from "/@/views/{{.modulePath}}/{{$businessName}}/list/component/model"
export default defineComponent({
name:"{{.apiVersion|replace "/" "_"|CaseCamel}}{{.modulePath|replace "/" "_"|CaseCamel}}{{.table.ClassName}}Detail",
{{$hascomponent := false}}
{{if or $imgsImp $tokenImp $fileImp}}
{{$hascomponent = true}}
{{end}}
{{if $hascomponent}}
components:{
{{if $editImp}}
GfUeditor,
{{end}}
{{if $imgsImp}}
uploadImg,
{{end}}
{{if $fileImp}}
uploadFile,
{{end}}
},
{{end}}
{{$hasProps := false}}
{{if eq .table.TplCategory "tree"}}
{{$hasProps = true}}
{{end}}
{{if not $hasProps}}
{{range $index, $column := .table.Columns}}
{{if or (ne $column.DictType "") (ne $column.LinkTableName "") }}
{{$hasProps = true}}
{{end}}
{{end}}
{{end}}
{{if $hasProps}}
props:{
{{range $index, $column := .table.Columns}}
{{if ne $column.DictType ""}}
{{$column.HtmlField}}Options:{
type:Array,
default:()=>[]
},
{{else if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
{{/*级联处理*/}}
{{end}}
{{/*关联表处理*/}}
{{$column.HtmlField}}Options:{
type:Array,
default:()=>[]
},
{{end}}
{{end}}
{{if eq .table.TplCategory "tree"}}
// {{.table.TableComment}}树选项
{{$businessName}}Options :{
type:Array,
default:()=>[]
},
{{end}}
},
{{end}}
setup(props,{emit}) {
{{if or $imgsImp $tokenImp $fileImp}}
const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
{{end}}
const {proxy} = <any>getCurrentInstance()
const formRef = ref<HTMLElement | null>(null);
const menuRef = ref();
{{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "imagefile"}}
//图片上传地址
const imageUrl{{$column.GoField}} = ref('')
//上传加载
const upLoading{{$column.GoField}} = ref(false)
{{end}}
{{end}}
const state = reactive<{{.table.ClassName}}EditState>({
loading:false,
isShowDialog: false,
formData: {
{{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "radio"}}
{{$column.HtmlField}}: false ,
{{else if eq $column.HtmlType "images" "file" "files" "checkbox" "selects" "treeSelects" "keyValue"}}
{{$column.HtmlField}}: [] ,
{{else}}
{{$column.HtmlField}}: undefined,
{{range $ti, $linkedTable := $.table.LinkedTables}}
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
{{if eq $column.HtmlType "checkbox" "selects" "treeSelects"}}
linked{{$column.GoField}}:[],
{{else}}
linked{{$column.GoField}}:{{ "{" }}{{CaseCamelLower $column.LinkLabelId}}:undefined,{{CaseCamelLower $column.LinkLabelName}}:undefined {{ "}" }},
{{end}}
{{end}}
{{end}}
{{end}}
{{end}}
{{range $ti, $linkedTable := .table.LinkedTables}}
linked{{$.table.ClassName}}{{$linkedTable.ClassName}}: {
{{range $ci, $linkedColumn := $linkedTable.RefColumns.Values}}
{{$linkedColumn.HtmlField}}:{{if eq $linkedColumn.HtmlType "images" "file" "files"}}[]{{else}}undefined{{end}}, // {{$linkedColumn.ColumnComment}}
{{end}}
},
{{end}}
},
// 表单校验
rules: {
{{range $index, $column := .table.Columns}}
{{if $column.IsRequired}}
{{$column.HtmlField}} : [
{ required: true, message: "{{$column.ColumnComment}}不能为空", trigger: "blur" }
]{{if ne $lens $index}},{{end}}
{{end}}
{{end}}
}
});
// 打开弹窗
const openDialog = (row?: {{.table.ClassName}}InfoData) => {
resetForm();
if(row) {
get{{.table.ClassName}}(row.{{.table.PkColumn.HtmlField}}!).then((res:any)=>{
const data = res.data;
{{range $index, $column := .table.DetailColumns}}
{{if and (ne $treeParentCode "") (eq $column.HtmlField $treeParentCode)}}
data.{{$treeParentCode}} = getTreeVal(props.{{$businessName}}Options,data.{{$treeParentCode}})
{{else if eq $column.HtmlType "checkbox"}}
data.{{$column.HtmlField}} = data.{{$column.HtmlField}}.split(",")
{{else if eq $column.HtmlType "imagefile"}}
//单图地址赋值
imageUrl{{$column.GoField}}.value = data.{{$column.HtmlField}} ? proxy.getUpFileUrl(data.{{$column.HtmlField}}) : ''
{{else if eq $column.HtmlType "images" "file" "files" "keyValue"}}
data.{{$column.HtmlField}} =data.{{$column.HtmlField}}?JSON.parse(data.{{$column.HtmlField}}) : []
{{end}}
{{if eq $column.HtmlField "createdBy"}}
data.createdBy = data.createdUser?.userNickname
{{end}}
{{if eq $column.HtmlField "deptId"}}
data.deptId = data.deptInfo?.deptName
{{end}}
{{if eq $column.HtmlField "updatedBy"}}
data.updatedBy = data.updatedUser?.userNickname
{{end}}
{{end}}
state.formData = data;
})
}
state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
state.isShowDialog = false;
};
// 取消
const onCancel = () => {
closeDialog();
};
const resetForm = ()=>{
state.formData = {
{{range $index, $column := .table.Columns}}
{{if eq $column.HtmlType "radio"}}
{{$column.HtmlField}}: false ,
{{else if eq $column.HtmlType "images" "file" "files" "checkbox" "selects" "treeSelects" "keyValue"}}
{{$column.HtmlField}}: [] ,
{{else}}
{{$column.HtmlField}}: undefined,
{{end}}
{{range $ti, $linkedTable := $.table.LinkedTables}}
{{if eq $column.LinkTableClass $linkedTable.ClassName}}
{{if eq $column.HtmlType "checkbox" "selects" "treeSelects"}}
linked{{$column.GoField}}:[],
{{else}}
linked{{$column.GoField}}:{{ "{" }}{{CaseCamelLower $column.LinkLabelId}}:undefined,{{CaseCamelLower $column.LinkLabelName}}:undefined {{ "}" }},
{{end}}
{{end}}
{{end}}
{{end}}
{{range $ti, $linkedTable := .table.LinkedTables}}
linked{{$.table.ClassName}}{{$linkedTable.ClassName}}: {
{{range $ci, $linkedColumn := $linkedTable.RefColumns.Values}}
{{$linkedColumn.HtmlField}}:{{if eq $linkedColumn.HtmlType "images" "file" "files"}}[]{{else}}undefined{{end}}, // {{$linkedColumn.ColumnComment}}
{{end}}
},
{{end}}
}
};
{{$setUpData:=true}}
{{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}}
//关联{{$column.LinkTableName}}表选项
const get{{$column.LinkTableClass}}Items{{$column.GoField}} = () => {
emit("get{{$column.LinkTableClass}}Items{{$column.GoField}}")
}
const get{{$column.GoField}}Op = computed(()=>{
get{{$column.LinkTableClass}}Items{{$column.GoField}}()
return props.{{$column.HtmlField}}Options
})
{{else if eq $column.HtmlType "richtext"}}
//富文本编辑器{{$column.ColumnComment}}
const set{{$column.GoField}}EditContent = (data:string) => {
state.formData.{{$column.HtmlField}} = data
}
{{else if eq $column.HtmlType "imagefile"}}
//单图上传{{$column.ColumnComment}}
const handleAvatarSuccess{{$column.GoField}}:UploadProps['onSuccess'] = (res, file) => {
if (res.code === 0) {
imageUrl{{$column.GoField}}.value = URL.createObjectURL(file.raw!)
state.formData.{{$column.HtmlField}} = res.data.path
} else {
ElMessage.error(res.msg)
}
upLoading{{$column.GoField}}.value = false
}
const beforeAvatarUpload{{$column.GoField}} = () => {
upLoading{{$column.GoField}}.value = true
return true
}
{{if $setUpData}}
const setUpData = () => {
return { token: getToken() }
}
{{$setUpData = false}}
{{end}}
{{else if eq $column.HtmlType "images"}}
const setUpImgList{{$column.GoField}} = (data:any)=>{
state.formData.{{$column.HtmlField}} = data
}
{{else if eq $column.HtmlType "file" "files"}}
const setUpFileList{{$column.GoField}} = (data:any)=>{
state.formData.{{$column.HtmlField}} = data
}
{{end}}
{{end}}
{{if eq .table.TplCategory "tree"}}
const getTreeVal = (data : any[],val : any) : any=>{
let findV:any = null
data.some((item:any)=>{
if(item.{{$treeCode}}==val){
findV = item.{{$treeName}}
return true
}
if(item.children) {
findV = getTreeVal(item.children, val)
if (findV) {
return findV
}
}
})
return findV
}
{{end}}
{{$setUpDataR:=true}}
return {
proxy,
openDialog,
closeDialog,
onCancel,
menuRef,
formRef,
{{range $index, $column := .table.Columns}}
{{if ne $column.LinkTableName ""}}
{{if $column.IsCascade}}
{{/*级联处理*/}}
{{else}}
{{/*关联表处理*/}}
get{{$column.LinkTableClass}}Items{{$column.GoField}},
get{{$column.GoField}}Op,
{{end}}
{{else if eq $column.HtmlType "richtext"}}
//富文本编辑器{{$column.ColumnComment}}
set{{$column.GoField}}EditContent,
{{else if eq $column.HtmlType "imagefile"}}
//图片上传地址
imageUrl{{$column.GoField}},
//上传加载
upLoading{{$column.GoField}},
handleAvatarSuccess{{$column.GoField}},
beforeAvatarUpload{{$column.GoField}},
{{if $setUpDataR}}
setUpData,
{{$setUpDataR = false}}
{{end}}
{{else if eq $column.HtmlType "images"}}
setUpImgList{{$column.GoField}},
{{else if eq $column.HtmlType "file" "files"}}
setUpFileList{{$column.GoField}},
{{end}}
{{end}}
{{if or $imgsImp $tokenImp $fileImp}}
baseURL,
{{end}}
...toRefs(state),
};
}
})
</script>
<style scoped>
{{if $tokenImp}}
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .avatar) {
width: 178px;
height: 178px;
display: block;
}
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.avatar-uploader .el-upload:hover) {
border-color: var(--el-color-primary);
}
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.el-icon.avatar-uploader-icon) {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
{{end}}
.{{.table.ModuleName}}-{{.table.BusinessName|CaseCamelLower}}-detail :deep(.el-form-item--large .el-form-item__label){
font-weight: bolder;
}
.pic-block{
margin-right: 8px;
}
.file-block{
width: 100%;
border: 1px solid var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
margin-bottom: 5px;
padding: 3px 6px;
}
.ml-2{margin-right: 5px;}
</style>