新建德森项目分支

skyouc

2024-12-21 c635d78b479510ebe2556a420948effcd30a0731

 zy-asrs-admin/src/components/mat/matQuery/index.vue

@@ -1,395 +1,395 @@
<script setup>
import { getCurrentInstance, ref, watch, reactive } from 'vue';
import { useRouter } from "vue-router";
import { get, post, postForm } from '@/utils/request.js'
import { message, Modal } from 'ant-design-vue';
import { logout } from '@/config.js';
import { formatMessage } from '@/utils/localeUtils.js';
import useTableSearch from '@/utils/tableUtils.jsx';
const context = getCurrentInstance()?.appContext.config.globalProperties;

const router = useRouter();

const emit = defineEmits(['handleOk'])

const TABLE_KEY = 'table-mat';
let currentPage = 1;
let pageSize = 10;
let tableData = ref([]);
let selectedData = ref([]);
const open = ref(false);
const reload = ref(false);
const searchInput = ref("")

const showWidth = ref("60%")

const {
    getColumnSearchProps,
} = useTableSearch();

const state = reactive({
    selectedRowKeys: [],
    loading: false,
    columns: [],
});
const onSelectChange = (selectedRowKeys, selectedRows) => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
    selectedData.value = selectedRows;
};

getColumns();
getPage();

state.columns = [
    {
        title: formatMessage('db.man_mat.tag_id', '所属归类'),
        dataIndex: 'tagId$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('tagId$'),
    },
    {
        title: formatMessage('db.man_mat.matnr', '商品编号'),
        dataIndex: 'matnr',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('matnr'),
    },
    {
        title: formatMessage('db.man_mat.maktx', '商品名称'),
        dataIndex: 'maktx',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('maktx'),
    },
    {
        title: formatMessage('db.man_mat.name', '别名'),
        dataIndex: 'name',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('name'),
    },
    {
        title: formatMessage('db.man_mat.specs', '规格'),
        dataIndex: 'specs',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('specs'),
    },
    {
        title: formatMessage('db.man_mat.model', '型号'),
        dataIndex: 'model',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('model'),
    },
    {
        title: formatMessage('db.man_mat.color', '颜色'),
        dataIndex: 'color',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('color'),
    },
    {
        title: formatMessage('db.man_mat.brand', '品牌'),
        dataIndex: 'brand',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('brand'),
    },
    {
        title: formatMessage('db.man_mat.unit', '单位'),
        dataIndex: 'unit',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('unit'),
    },
    {
        title: formatMessage('db.man_mat.price', '单价'),
        dataIndex: 'price',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('price'),
    },
    {
        title: formatMessage('db.man_mat.sku', 'sku'),
        dataIndex: 'sku',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('sku'),
    },
    {
        title: formatMessage('db.man_mat.units', '单位量'),
        dataIndex: 'units',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('units'),
    },
    {
        title: formatMessage('db.man_mat.barcode', '条码'),
        dataIndex: 'barcode',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('barcode'),
    },
    {
        title: formatMessage('db.man_mat.origin', '产地'),
        dataIndex: 'origin',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('origin'),
    },
    {
        title: formatMessage('db.man_mat.manu', '厂家'),
        dataIndex: 'manu',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('manu'),
    },
    {
        title: formatMessage('db.man_mat.manu_date', '生产日期'),
        dataIndex: 'manuDate',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('manuDate'),
    },
    {
        title: formatMessage('db.man_mat.item_num', '品项数'),
        dataIndex: 'itemNum',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('itemNum'),
    },
    {
        title: formatMessage('db.man_mat.weight', '重量'),
        dataIndex: 'weight',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('weight'),
    },
    {
        title: formatMessage('db.man_mat.length', '长度'),
        dataIndex: 'length',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('length'),
    },
    {
        title: formatMessage('db.man_mat.volume', '体积'),
        dataIndex: 'volume',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('volume'),
    },
    {
        title: formatMessage('db.man_mat.three_code', '三方编码'),
        dataIndex: 'threeCode',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('threeCode'),
    },
    {
        title: formatMessage('db.man_mat.supp', '供应商'),
        dataIndex: 'supp',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('supp'),
    },
    {
        title: formatMessage('db.man_mat.supp_code', '供应商编码'),
        dataIndex: 'suppCode',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('suppCode'),
    },
    {
        title: formatMessage('db.man_mat.dead_time', '保质期'),
        dataIndex: 'deadTime',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('deadTime'),
    },
    {
        title: formatMessage('db.man_mat.safeStockLimit', '安全库存上限'),
        dataIndex: 'safeStockLimit',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('safeStockLimit'),
    },
    {
        title: formatMessage('db.man_mat.safeStockMinimum', '安全库存下限'),
        dataIndex: 'safeStockMinimum',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('safeStockMinimum'),
    },
    {
        title: formatMessage('db.man_mat.validity', '有效期'),
        dataIndex: 'validity',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('validity'),
    },

    {
        title: formatMessage('db.man_mat.uuid', '编号'),
        dataIndex: 'uuid',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('uuid'),
    },
    {
        title: formatMessage('db.man_mat.flag', '标识'),
        dataIndex: 'flag',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('flag'),
    },
    {
        title: formatMessage('db.man_mat.sort', '排序'),
        dataIndex: 'sort',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('sort'),
    },
    {
        title: formatMessage('db.man_mat.status', '状态'),
        dataIndex: 'status$',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('status$'),
    },
    {
        title: formatMessage('db.man_mat.memo', '备注'),
        dataIndex: 'memo',
        width: 140,
        ellipsis: true,
        ...getColumnSearchProps('memo'),
    },

];

//加载扩展字段
async function getColumns() {
    let fieldResp = await post('/api/matField/list', {
        fieldType: 0
    })
    let fieldResult = fieldResp.data;
    let tmp = state.columns;
    if (fieldResult.code == 200) {
        let data = fieldResult.data;

        data.forEach((item) => {
            tmp.push({
                title: formatMessage(item.language, item.describe),
                name: item.name,
                dataIndex: item.name,
                key: item.name,
                width: 140,
                editable: true,
            })
        })

        state.columns = tmp;
    } else if (result.code === 401) {
        message.error(result.msg);
        logout()
    } else {
        message.error(result.msg);
    }
}

function getPage() {
    state.loading = true;

    post('/api/mat/page', {
        current: currentPage,
        pageSize: pageSize,
        condition: searchInput.value
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            let data = result.data;
            tableData.value = data;

            state.loading = false;
        } else if (result.code === 401) {
            message.error(result.msg);
            logout()
        } else {
            message.error(result.msg);
        }
    })
}

const handleOk = () => {
    open.value = false;
    emit('handleOk', selectedData.value)

    state.selectedRowKeys = []
    selectedData.value = []
}

const handleCancel = () => {
    open.value = false;
}

const onSearch = () => {
    getPage()
}

const onPageChange = (page, size) => {
    currentPage = page;
    pageSize = size;
    getPage();
}

const showTotalPage = (total, range) => {
    return formatMessage('page.total.head', '总计') + total + formatMessage('page.total.footer', '条')
}

const reloadPage = () => {
    currentPage = 1;
    searchInput.value = "";
    getPage()
}

watch(reload, (newVal, oldVal) => {
    if (reload.value) {
        reloadPage()
    }
})

defineExpose({
    tableData,
    open,
    showWidth,
    reload
})

</script>

<script>
export default {
    name: 'matQueryComponent'
}
</script>

<template>
    <div>
        <a-modal v-model:open="open" :width="showWidth" @ok="handleOk" @cancel="handleCancel">
            <div class="table-header">
                <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"
                    style="width: 200px;" @search="onSearch" />
            </div>
            <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
                :pagination="{ total: tableData.total, showTotal: showTotalPage, onChange: onPageChange }"
                :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
                :scroll="{ y: 768 }" :columns="state.columns" :loading="state.loading">
            </a-table>
        </a-modal>
    </div>
</template>

<style></style>
<script setup>

import { getCurrentInstance, ref, watch, reactive } from 'vue';

import { useRouter } from "vue-router";

import { get, post, postForm } from '@/utils/request.js'

import { message, Modal } from 'ant-design-vue';

import { logout } from '@/config.js';

import { formatMessage } from '@/utils/localeUtils.js';

import useTableSearch from '@/utils/tableUtils.jsx';

const context = getCurrentInstance()?.appContext.config.globalProperties;



const router = useRouter();



const emit = defineEmits(['handleOk'])



const TABLE_KEY = 'table-mat';

let currentPage = 1;

let pageSize = 10;

let tableData = ref([]);

let selectedData = ref([]);

const open = ref(false);

const reload = ref(false);

const searchInput = ref("")



const showWidth = ref("60%")



const {

    getColumnSearchProps,

} = useTableSearch();



const state = reactive({

    selectedRowKeys: [],

    loading: false,

    columns: [],

});

const onSelectChange = (selectedRowKeys, selectedRows) => {

    // console.log('selectedRowKeys changed: ', selectedRowKeys);

    state.selectedRowKeys = selectedRowKeys;

    selectedData.value = selectedRows;

};



getColumns();

getPage();



state.columns = [

    {

        title: formatMessage('db.man_mat.tag_id', '所属归类'),

        dataIndex: 'tagId$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('tagId$'),

    },

    {

        title: formatMessage('db.man_mat.matnr', '商品编号'),

        dataIndex: 'matnr',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('matnr'),

    },

    {

        title: formatMessage('db.man_mat.maktx', '商品名称'),

        dataIndex: 'maktx',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('maktx'),

    },

    {

        title: formatMessage('db.man_mat.name', '别名'),

        dataIndex: 'name',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('name'),

    },

    {

        title: formatMessage('db.man_mat.specs', '规格'),

        dataIndex: 'specs',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('specs'),

    },

    {

        title: formatMessage('db.man_mat.model', '型号'),

        dataIndex: 'model',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('model'),

    },

    {

        title: formatMessage('db.man_mat.color', '颜色'),

        dataIndex: 'color',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('color'),

    },

    {

        title: formatMessage('db.man_mat.brand', '品牌'),

        dataIndex: 'brand',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('brand'),

    },

    {

        title: formatMessage('db.man_mat.unit', '单位'),

        dataIndex: 'unit',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('unit'),

    },

    {

        title: formatMessage('db.man_mat.price', '单价'),

        dataIndex: 'price',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('price'),

    },

    {

        title: formatMessage('db.man_mat.sku', 'sku'),

        dataIndex: 'sku',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('sku'),

    },

    {

        title: formatMessage('db.man_mat.units', '单位量'),

        dataIndex: 'units',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('units'),

    },

    {

        title: formatMessage('db.man_mat.barcode', '条码'),

        dataIndex: 'barcode',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('barcode'),

    },

    {

        title: formatMessage('db.man_mat.origin', '产地'),

        dataIndex: 'origin',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('origin'),

    },

    {

        title: formatMessage('db.man_mat.manu', '厂家'),

        dataIndex: 'manu',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('manu'),

    },

    {

        title: formatMessage('db.man_mat.manu_date', '生产日期'),

        dataIndex: 'manuDate',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('manuDate'),

    },

    {

        title: formatMessage('db.man_mat.item_num', '品项数'),

        dataIndex: 'itemNum',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('itemNum'),

    },

    {

        title: formatMessage('db.man_mat.weight', '重量'),

        dataIndex: 'weight',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('weight'),

    },

    {

        title: formatMessage('db.man_mat.length', '长度'),

        dataIndex: 'length',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('length'),

    },

    {

        title: formatMessage('db.man_mat.volume', '体积'),

        dataIndex: 'volume',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('volume'),

    },

    {

        title: formatMessage('db.man_mat.three_code', '三方编码'),

        dataIndex: 'threeCode',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('threeCode'),

    },

    {

        title: formatMessage('db.man_mat.supp', '供应商'),

        dataIndex: 'supp',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('supp'),

    },

    {

        title: formatMessage('db.man_mat.supp_code', '供应商编码'),

        dataIndex: 'suppCode',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('suppCode'),

    },

    {

        title: formatMessage('db.man_mat.dead_time', '保质期'),

        dataIndex: 'deadTime',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('deadTime'),

    },

    {

        title: formatMessage('db.man_mat.safeStockLimit', '安全库存上限'),

        dataIndex: 'safeStockLimit',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('safeStockLimit'),

    },

    {

        title: formatMessage('db.man_mat.safeStockMinimum', '安全库存下限'),

        dataIndex: 'safeStockMinimum',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('safeStockMinimum'),

    },

    {

        title: formatMessage('db.man_mat.validity', '有效期'),

        dataIndex: 'validity',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('validity'),

    },



    {

        title: formatMessage('db.man_mat.uuid', '编号'),

        dataIndex: 'uuid',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('uuid'),

    },

    {

        title: formatMessage('db.man_mat.flag', '标识'),

        dataIndex: 'flag',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('flag'),

    },

    {

        title: formatMessage('db.man_mat.sort', '排序'),

        dataIndex: 'sort',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('sort'),

    },

    {

        title: formatMessage('db.man_mat.status', '状态'),

        dataIndex: 'status$',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('status$'),

    },

    {

        title: formatMessage('db.man_mat.memo', '备注'),

        dataIndex: 'memo',

        width: 140,

        ellipsis: true,

        ...getColumnSearchProps('memo'),

    },



];



//加载扩展字段

async function getColumns() {

    let fieldResp = await post('/api/matField/list', {

        fieldType: 0

    })

    let fieldResult = fieldResp.data;

    let tmp = state.columns;

    if (fieldResult.code == 200) {

        let data = fieldResult.data;



        data.forEach((item) => {

            tmp.push({

                title: formatMessage(item.language, item.describe),

                name: item.name,

                dataIndex: item.name,

                key: item.name,

                width: 140,

                editable: true,

            })

        })



        state.columns = tmp;

    } else if (result.code === 401) {

        message.error(result.msg);

        logout()

    } else {

        message.error(result.msg);

    }

}



function getPage() {

    state.loading = true;



    post('/api/mat/page', {

        current: currentPage,

        pageSize: pageSize,

        condition: searchInput.value

    }).then((resp) => {

        let result = resp.data;

        if (result.code == 200) {

            let data = result.data;

            tableData.value = data;



            state.loading = false;

        } else if (result.code === 401) {

            message.error(result.msg);

            logout()

        } else {

            message.error(result.msg);

        }

    })

}



const handleOk = () => {

    open.value = false;

    emit('handleOk', selectedData.value)



    state.selectedRowKeys = []

    selectedData.value = []

}



const handleCancel = () => {

    open.value = false;

}



const onSearch = () => {

    getPage()

}



const onPageChange = (page, size) => {

    currentPage = page;

    pageSize = size;

    getPage();

}



const showTotalPage = (total, range) => {

    return formatMessage('page.total.head', '总计') + total + formatMessage('page.total.footer', '条')

}



const reloadPage = () => {

    currentPage = 1;

    searchInput.value = "";

    getPage()

}



watch(reload, (newVal, oldVal) => {

    if (reload.value) {

        reloadPage()

    }

})



defineExpose({

    tableData,

    open,

    showWidth,

    reload

})



</script>



<script>

export default {

    name: 'matQueryComponent'

}

</script>



<template>

    <div>

        <a-modal v-model:open="open" :width="showWidth" @ok="handleOk" @cancel="handleCancel">

            <div class="table-header">

                <a-input-search v-model:value="searchInput" :placeholder="formatMessage('page.input', '请输入')"

                    style="width: 200px;" @search="onSearch" />

            </div>

            <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"

                :pagination="{ total: tableData.total, showTotal: showTotalPage, onChange: onPageChange }"

                :data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"

                :scroll="{ y: 768 }" :columns="state.columns" :loading="state.loading">

            </a-table>

        </a-modal>

    </div>

</template>



<style></style>