mr_web_back/src/pages/index/tdk/components/DetailTdkDialog.vue
2023-06-28 18:44:28 +08:00

92 lines
2.4 KiB
Vue

<template>
<el-dialog v-model="props.modelValue" title="网站tdk详情" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true">
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="tdk所属模块" prop="tdk_type">
<el-select v-model="formData.tdk_type" clearable placeholder="请选择">
<el-option v-for="item in tdk_type" :key="item.dictionary_guid" :label="item.dictionary_name"
:value="item.dictionary_value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label-width="labelWidth" label="网页标题" prop="tdk_title">
<el-input v-model='formData.tdk_title' type="text" placeholder='请输入网页标题'></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label-width="labelWidth" label="网页简介" prop="tdk_description">
<el-input v-model='formData.tdk_description' type="textarea" :rows="5" placeholder='请输入网页简介'></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item :label-width="labelWidth" label="网页关键词" prop="tdk_keyword">
<el-input v-model='formData.tdk_keyword' type="textarea" :rows="5" placeholder='请输入网页关键词'></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { isEmptyObject } from "~/utils/index";
import { getDictionary } from '~/service/tdk';
// --业务参数
// --业务方法
// 字典获取
const tdk_type = ref([]);
async function get_tdk_type() {
await getDictionary({ dictionary_value: 'tdk_type' }).then((res) => {
tdk_type.value = res
})
}
// --基础参数
const formRef = ref();
const labelWidth = 100;
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const formData = ref({
...props.data,
});
// --基础方法
watch(props, (v) => {
formData.value = v.data;
});
// 打开弹窗时执行
const openDialog = () => {
get_tdk_type()
};
const closeDialog = () => {
emits("update:modelValue", false);
};
</script>
<style lang="less" scoped></style>