web_dist/src/views/logisticsMaterials/logisticsBasicData/projectInformation/info.vue

<template>
    <div class="container">
        <el-form ref="formRef" :model="form" class="form" label-width="127px" size="default">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div>第一部分</div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="项目编码" prop="projectCode">
                        <el-input v-model="form.projectCode" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目分类" prop="projectType">
                        <el-select v-model="form.projectType" placeholder="请选择项目分类">
                            <el-option v-for="item in projectTypeOption" :label="typeName"
                                :value="item.typeCode"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="form.projectName" placeholder="请输入项目名称">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="拼音码" prop="pyCode">
                        <el-input v-model="form.pyCode" placeholder="请输入项目名称" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="五笔码" prop="wbCode">
                        <el-input v-model="form.wbCode" placeholder="请输入项目名称" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="零售价" prop="retailPrice">
                        <el-input v-model="form.retailPrice" placeholder="请输入零售价" type="number">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内部结算价" prop="internalSettlementPrice">
                        <el-input v-model="form.internalSettlementPrice" placeholder="请输入内部结算价" type="number">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="批发价" prop="wholesalePrice">
                        <el-input v-model="form.wholesalePrice" placeholder="请输入批发价" type="number">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产厂家" prop="lcCompanyId">
                        <el-select v-model="form.lcCompanyId" placeholder="请选择生产厂家">
                            <el-option v-for="item in lcCompanyOption" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="请领月份" prop="name">
                        <el-date-picker v-model="form.date" type="month" placeholder="请选择日期"></el-date-picker>
                    </el-form-item>
                </el-col> -->
            </el-row>

            <el-row :gutter="20">
                <div>第二部分</div>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="项目规格" prop="projectSpecifications">
                        <el-input v-model="form.projectSpecifications" placeholder="请输入项目规格" type="number">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单位" prop="projectUnit">
                        <el-select v-model="form.projectUnit" placeholder="请选择单位">
                            <el-option v-for="item in projectUnitOption" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计费方式" prop="chargingType">
                        <el-select v-model="form.chargingType" placeholder="请选择计费方式">
                            <el-option v-for="item in chargingTypeOption" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="最小包装单位" prop="projectMinUnit">
                        <el-select v-model="form.projectMinUnit" placeholder="请选择最小包装单位">
                            <el-option v-for="item in projectMinUnitOption" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="包装量" prop="packagingQuantity">
                        <el-input v-model="form.packagingQuantity" placeholder="请输入包装量" type="number">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="批准文号" prop="approvalNumber">
                        <el-input v-model="form.approvalNumber" placeholder="请输入批准文号">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品编号" prop="productCode">
                        <el-input v-model="form.productCode" placeholder="请输入产品编号">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注册证号" prop="registCode">
                        <el-input v-model="form.registCode" placeholder="请输入注册证号">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="物价码" prop="priceCode">
                        <el-input v-model="form.priceCode" placeholder="请输入物价码">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否停用" prop="delFlag">
                        <el-select v-model="form.delFlag" placeholder="请选择">
                            <el-option v-for="item in delFlagOption" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <!-- <el-divider /> -->
        <el-row :gutter="20">
            <el-col :span="8">
                <div>别名管理</div>
            </el-col>
        </el-row>
        <div style="margin: 10px 0;">
            <el-button icon="Plus" type="primary" @click="showDialog = true" size="small">新增别名</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" height="500" size="default">
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="toEditAlias(scope.row, scope.$index)">
                        编 辑
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteAlias(scope.$index)">
                        删 除
                    </el-button>
                    <!-- <el-button link type="primary" size="small">Edit</el-button> -->
                </template>
            </el-table-column>
            <el-table-column type="index" prop="date" label="序号" width="80" />
            <el-table-column prop="name" label="项目别名" />
            <el-table-column prop="state" label="别名拼音码" />
            <el-table-column prop="city" label="别名五笔码" />
        </el-table>
        <div class="confirm-area flex-center-row" style="margin-top: 20px;">
            <el-button type="primary" @click="confirm" size="default">确定</el-button>
            <el-button @click="cancel" size="default">取消</el-button>
        </div>
    </div>

    <!-- <el-divider /> -->


    <el-dialog v-model="showDialog" :close-on-click-modal="false" :close-on-press-escape="false" title="新增别名"
        width="30%" top="15%" destroy-on-close @close="handleDialogClose">
        <!-- <el-table :data="itemTableData" style="width: 100%" height="450">
            <el-table-column prop="date" label="项目编码" />
            <el-table-column prop="name" label="项目名称" />
            <el-table-column prop="address" label="规格" />
            <el-table-column prop="address" label="单位" />
        </el-table> -->
        <div class="flex-center-column ">
            <el-input v-model="aliasForm.name" placeholder="请输入内容" style="width: 95%;margin-bottom: 20px;"
                size="default" />
            <el-button type="primary" @click="addOrEditProjectAlias" size="default">确定</el-button>
        </div>
    </el-dialog>
</template>
<script setup name="YpDictInfo">
import { nextTick, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { clone } from '@/utils/clone'
import { Export } from '@/utils/ExportExcel'
import { getLcCompanyList } from '@/api/lc/company.js'
import { insertLcProject, getLcProjectById, getAllLcProjectTypes } from '@/api/lc/project.js'

const props = defineProps({
    //子组件接收父组件传递过来的值
    currentEditCode: String,
})
//使用父组件传递过来的值
const { currentEditCode } = toRefs(props)
//父组件的方法
const emit = defineEmits(["handleDialogClose"])
onMounted(() => {
    nextTick(() => {
        getCompanyList()
        getProjectTypes()
    })
})

let form = ref({
    code: ""
})

let showDialog = ref(false)

let itemTableData = ref([
])

let tableData = ref([])

const projectTypeOption = ref([])
const lcCompanyOption = ref([])
const projectUnitOption = ref(
    [
        { "label": "把", "value": "0" },
        { "label": "板", "value": "1" },
        { "label": "包", "value": "2" },
        { "label": "本", "value": "3" },
        { "label": "袋", "value": "4" },
        { "label": "副", "value": "5" },
        { "label": "个", "value": "6" },
        { "label": "根", "value": "7" },
        { "label": "盒", "value": "8" },
        { "label": "件", "value": "9" },
        { "label": "卷", "value": "10" },
        { "label": "块", "value": "11" },
        { "label": "枚", "value": "12" },
        { "label": "颗", "value": "13" },
        { "label": "米", "value": "14" },
        { "label": "片", "value": "15" },
        { "label": "瓶", "value": "16" },
        { "label": "人份", "value": "17" },
        { "label": "套", "value": "18" },
        { "label": "条", "value": "19" },
        { "label": "贴", "value": "20" },
        { "label": "桶", "value": "21" },
        { "label": "筒", "value": "22" },
        { "label": "箱", "value": "23" },
        { "label": "张", "value": "24" },
        { "label": "支", "value": "25" },
        { "label": "只", "value": "26" }
    ]
)
const chargingTypeOption = ref([
    { "label": "按次", "value": "0" },
    { "label": "按天", "value": "1" },
    { "label": "按量", "value": "2" }
])
const projectMinUnitOption = ref([
    { "label": "把", "value": "0" },
    { "label": "板", "value": "1" },
    { "label": "包", "value": "2" },
    { "label": "本", "value": "3" },
    { "label": "袋", "value": "4" },
    { "label": "副", "value": "5" },
    { "label": "个", "value": "6" },
    { "label": "根", "value": "7" },
    { "label": "盒", "value": "8" },
    { "label": "件", "value": "9" },
    { "label": "卷", "value": "10" },
    { "label": "块", "value": "11" }
])
const delFlagOption = ref([
    { "label": "启用", "value": "0" },
    { "label": "停用", "value": "1" }
])


const handleSearch = () => {
    console.log(form.value)
    showDialog.value = true
}

const confirm = () => {

}

const cancel = () => {
    console.log("cancel")
    emit("handleDialogClose")
}

const getCompanyList = () => {
    console.log("getCompanyList")
    let params = {
        companyType: "1"
    }
    getLcCompanyList(params).then(res => {
        lcCompanyOption.value = res.records
    }).catch(err => {

    })
}

const getProjectTypes = () => {
    getAllLcProjectTypes().then(res => {
        projectTypeOption.value = res
    }).catch(err => {

    })
}

const aliasForm = ref({
    name: ""
})

const aliasEditIndex = ref(-1)
const toEditAlias = (row, index) => {
    aliasForm.value.name = row.name
    aliasEditIndex.value = index
    showDialog.value = true
}

const deleteAlias = (index) => {
    ElMessageBox.confirm("是否删除", {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        distinguishCancelAndClose: true,
        dangerouslyUseHTMLString: true
    }).then(() => {
        tableData.value.splice(index, 1)
    }).catch((action) => {
    })
}
const addOrEditProjectAlias = () => {
    if (!aliasForm.value.name) {
        return ElMessage.warning("请输入别名")
    }
    if (aliasEditIndex.value >= 0) {
        console.log("target", tableData.value)
        tableData.value[aliasEditIndex.value].name = aliasForm.value.name
        showDialog.value = false
    } else {
        tableData.value.push({
            name: aliasForm.value.name
        })
        showDialog.value = false
    }
}

const handleDialogClose = () => {
    aliasForm.value = {
        name: ""
    }
    aliasEditIndex.value = -1
}


</script>

<style lang="scss">
.container {
    height: 98%;
    width: 100%;

    .top-area {
        height: 8%;
        border-bottom: 1px solid #727070;
        font-size: 1.2rem;
    }

    .title-area {
        font-size: 1.2rem;
        font-weight: bold;
    }
}



.el-input__icon {
    cursor: pointer;
}

.flex-center-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>