mky-vent-base/src/views/vent/gas/gasInspectNonfc/components/inspectEdit.vue

<template>
    <div class="inspectEdit">
        <a-form :model="formStateEdit" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"
            autocomplete="off">
            <a-form-item label="瓦斯巡检卡ID：">
                <a-input v-model:value="formStateEdit.id" disabled />
            </a-form-item>
            <a-form-item label="瓦斯巡检地点：">
                <a-select ref="select" v-model:value="formStateEdit.strInstallPos" placeholder="请选择...">
                    <a-select-option v-for="(item, index) in addressList" :key="index">{{ item.label
                        }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="所属区队：">
                <a-select ref="select" v-model:value="formStateEdit.disTeamId" placeholder="请选择...">
                    <a-select-option v-for="(item, index) in qdList" :key="index">{{ item.label }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="巡检类型：">
                <JDictSelectTag v-model:value="formStateEdit.insType" placeholder="请选择巡检类型" dictCode="ins_type"
                    style="width: 240px" />
            </a-form-item>
        </a-form>
        <div class="edit-btn">
            <a-button type="primary" @click="confirmEdit">提交</a-button>
            <a-button type="success" @click="cancelEdit">取消</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { queryAllDisTeam } from '../gasInspectNonfc.api'

let props = defineProps({
    inspectEditData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

let formStateEdit = reactive<any>({
    id: '',
    strInstallPos: '',
    disTeamId: '',
    insType: '',
})
let addressList = ref<any[]>([//监测地点下拉选项列表
    // { label: '地址1', value: '1' },
    // { label: '地址2', value: '2' },
])
let qdList = ref<any[]>([])//区队下拉选项列表
let $emit = defineEmits(['confirmEdit', 'cancelEdit'])

//查询所有区队
async function queryAllDisTeamList() {
    let res = await queryAllDisTeam()
    console.log(res, '区队数据---------------')
    if (res.length != 0) {
        qdList.value = res.map(m => {
            return {
                label: m.name,
                value: m.id
            }
        })
    }
}
//编辑提交
let confirmEdit = () => {
    $emit('confirmEdit', formStateEdit)
}
//编辑取消
let cancelEdit = () => {
    formStateEdit = {
        id: '',
        strInstallPos: '',
        disTeamId: '',
        insType: '',
    }
    $emit('cancelEdit',)
}
watch(() => props.inspectEditData, (newV, oldV) => {
    formStateEdit = Object.assign({}, newV)
}, { immediate: true })
onMounted(() => {
    queryAllDisTeamList()
})
</script>

<style lang="less" scoped>
.inspectEdit {
    padding: 10px;
    box-sizing: border-box;

    .edit-btn {
        display: flex;
        justify-content: flex-end;

        .zxm-btn {
            margin: 0px 10px;
        }
    }

}

:deep(.zxm-input) {
    color: #fff;
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
}
</style>