123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- <script lang="ts">
- // 声明额外的选项
- export default {
- name: "Add"
- };
- </script>
- <script setup lang="ts">
- import { inject, ref } from "vue";
- import { useRenderIcon } from "@/components/ReIcon/src/hooks";
- import { ElMessage, ElMessageBox } from "element-plus";
- import { http } from "@/utils/http";
- // 获取当前板块接口列表
- import Upload from "@iconify-icons/ri/upload-2-fill";
- import Close from "@iconify-icons/ri/close-fill";
- // 获取URLLIST
- import { getGroupUrl } from "@/utils/getUrl/getUrl";
- const props = defineProps<{
- submit: {
- type: Function;
- default: () => {};
- };
- addVisible: {
- type: Boolean;
- default: false;
- };
- width: {
- type: Number;
- default: 50;
- };
- }>();
- // 表单数据
- let UpdateForm = ref({
- dictId: "", //字典ID
- itemValue: "", //字典项值
- label: "", //字典项名称
- dictType: "", //字典类型
- description: "", //字典项描述
- sortOrder: "", //排序(升序)
- remarks: "", //备注信息
- });
- // 选项卡参数(默认值为列表某项的id)
- const activeId = ref('1')
- // 提交函数
- const submit = async () => {
- const UrlList = await getGroupUrl(['kxsConfigServer']);
- const { status, msg }: any = await http.Request({ method: UrlList.kxsConfigServer.sysDictItemadd.method, url: UrlList.kxsConfigServer.sysDictItemadd.url, params: UpdateForm.value});
- if (status === 1) {
- ElMessage({
- message: "新增成功",
- type: "success"
- });
- UpdateForm.value = {
- dictId: "", //字典ID
- itemValue: "", //字典项值
- label: "", //字典项名称
- dictType: "", //字典类型
- description: "", //字典项描述
- sortOrder: "", //排序(升序)
- remarks: "", //备注信息
- };
- closeVisible();
- } else {
- ElMessageBox.alert(msg, "提示", {
- confirmButtonText: "关闭",
- type: "warning"
- });
- };
- };
- const closeFn: any = inject('closeAddVisible');
- // 关闭弹窗回调函数
- const closeVisible = () => {
- UpdateForm.value = {
- dictId: "", //字典ID
- itemValue: "", //字典项值
- label: "", //字典项名称
- dictType: "", //字典类型
- description: "", //字典项描述
- sortOrder: "", //排序(升序)
- remarks: "", //备注信息
- };
- closeFn();
- };
- </script>
- <template lang="pug">
- .main
- el-dialog(v-model='props.addVisible' width="50%" title="新增" @close="closeVisible()")
- el-form(:model='UpdateForm' label-position="right" label-width="100px")
- el-form-item(label='字典ID' prop="dictId")
- el-input(v-model='UpdateForm.dictId' autocomplete='off' class="!w-[230px]"
- placeholder="请输入字典ID")
- el-form-item(label='字典项值' prop="itemValue")
- el-input(v-model='UpdateForm.itemValue' autocomplete='off' class="!w-[230px]"
- placeholder="请输入字典项值")
- el-form-item(label='字典项名称' prop="label")
- el-input(v-model='UpdateForm.label' autocomplete='off' class="!w-[230px]"
- placeholder="请输入字典项名称")
- el-form-item(label='字典类型' prop="dictType")
- el-input(v-model='UpdateForm.dictType' autocomplete='off' class="!w-[230px]"
- placeholder="请输入字典类型")
- el-form-item(label='字典项描述' prop="description")
- el-input(v-model='UpdateForm.description' autocomplete='off' class="!w-[230px]"
- placeholder="请输入字典项描述")
- el-form-item(label='排序(升序)' prop="sortOrder")
- el-input(v-model='UpdateForm.sortOrder' autocomplete='off' class="!w-[230px]"
- placeholder="请输入排序(升序)")
- el-form-item(label='备注信息' prop="remarks")
- el-input(v-model='UpdateForm.remarks' autocomplete='off' class="!w-[230px]"
- placeholder="请输入备注信息")
- el-button(
- :icon="useRenderIcon(Close)",
- :loading="loading",
- @click="closeVisible()"
- ) 关闭
- el-button(
- type="primary",
- :icon="useRenderIcon(Upload)",
- :loading="loading",
- @click="submit"
- ) 确认提交
- </template>
- <style scoped lang="scss">
- :deep(.el-dropdown-menu__item i) {
- margin: 0;
- }
- :deep(.el-form-item__label) {
- font-weight: 700;
- }
- :deep(.el-pagination) {
- flex-flow: wrap;
- }
- :deep(.is-draggable) {
- max-height: 80vh;
- overflow: auto;
- }
- :deep(.el-dialog__header) {
- position: sticky;
- top: 0;
- z-index: 2;
- background: #fff;
- }
- .collapsedom {
- padding: 0 20px;
- background-color: #fff;
- }
- .ovh-x {
- height: 40vh;
- overflow-y: auto;
- }
- :deep(.el-descriptions__header) {
- margin: 16px 0 !important;
- }
- </style>
|