|
@@ -0,0 +1,169 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ Storehouse_ProductClass_List,
|
|
|
+ Storehouse_Product_List,
|
|
|
+ Storehouse_Product_Add,
|
|
|
+ Storehouse_Product_Edit,
|
|
|
+ Storehouse_Product_Del,
|
|
|
+ Storehouse_Product_Spec_List
|
|
|
+} from '@/api/storehouse/index'
|
|
|
+import { GlobalStore } from '@/stores/index'
|
|
|
+import { ref, reactive, nextTick, onMounted } from 'vue'
|
|
|
+import Drawer from '@/components/Drawer/index.vue'
|
|
|
+import TableBase from '@/components/TableBase/index.vue'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { Edit, Delete } from '@element-plus/icons-vue'
|
|
|
+import type { ColumnProps } from '@/components/TableBase/interface/index'
|
|
|
+import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
|
|
|
+import Upload from '@/components/Upload/index.vue'
|
|
|
+
|
|
|
+const isNew = ref(true)
|
|
|
+const globalStore = GlobalStore()
|
|
|
+const formLabelWidth = ref('100px')
|
|
|
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
|
+const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
|
+
|
|
|
+const initParam = {
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ T_name: ''
|
|
|
+}
|
|
|
+
|
|
|
+const columns: ColumnProps[] = [
|
|
|
+ { type: 'index', label: '序号', width: 80 },
|
|
|
+ { prop: 'T_img', label: '产品图片' },
|
|
|
+ { prop: 'T_name', label: '产品名称' },
|
|
|
+ { prop: 'T_class_name', label: '产品分类' },
|
|
|
+ { prop: 'T_model', label: '产品型号' },
|
|
|
+ { prop: 'T_spec', label: '产品规格' },
|
|
|
+ { prop: 'T_relation_sn', label: '关联SN' },
|
|
|
+ { prop: 'T_name', label: '更新时间' },
|
|
|
+ { prop: 'operation', label: '操作', width: 150, fixed: 'right' }
|
|
|
+]
|
|
|
+
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }]
|
|
|
+})
|
|
|
+const form = reactive({
|
|
|
+ T_name: '',
|
|
|
+ T_class: '',
|
|
|
+ T_model: '',
|
|
|
+ T_spec: '',
|
|
|
+ T_relation_sn: '',
|
|
|
+ T_img: '',
|
|
|
+ T_remark: ''
|
|
|
+})
|
|
|
+
|
|
|
+const openDrawer = (type: string, row?: any) => {
|
|
|
+ isNew.value = type === 'new' ? true : false
|
|
|
+ // nextTick(() => {
|
|
|
+ // !isNew.value && ((form.name = row.T_name), (form.id = row.Id))
|
|
|
+ // })
|
|
|
+ drawerRef.value?.openDrawer()
|
|
|
+}
|
|
|
+const UserDelete = (row: any) => {
|
|
|
+ //
|
|
|
+}
|
|
|
+
|
|
|
+const callbackDrawer = () => {}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const search = reactive({
|
|
|
+ T_name: '',
|
|
|
+ T_class_name: ''
|
|
|
+})
|
|
|
+const searchHandle = () => {
|
|
|
+ //
|
|
|
+}
|
|
|
+
|
|
|
+// 获取产品分类
|
|
|
+const options = ref<any[]>([])
|
|
|
+const getProductClassList = async () => {
|
|
|
+ const res: any = await Storehouse_ProductClass_List({ page: 1, page_z: 999 })
|
|
|
+ options.value = res.Data.Data
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getProductClassList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="production-list">
|
|
|
+ <TableBase ref="TableRef" :columns="columns" :requestApi="Storehouse_Product_List" :initParam="initParam">
|
|
|
+ <template #table-header>
|
|
|
+ <div class="input-suffix">
|
|
|
+ <el-row :gutter="20" style="margin-bottom: 0">
|
|
|
+ <el-col :xl="6" :lg="8" :md="10">
|
|
|
+ <span class="inline-flex items-center">产品分类:</span>
|
|
|
+ <el-select v-model="search.T_class_name" class="w-50 m-2" placeholder="请选择分类~">
|
|
|
+ <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="10" :md="12">
|
|
|
+ <span class="inline-flex items-center">产品名称:</span>
|
|
|
+ <el-input v-model="search.T_name" type="text" class="w-50 m-2" placeholder="按产品名称、产品型号搜索" />
|
|
|
+ <el-button type="primary" @click="searchHandle">搜索</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :md="2" class="btn"
|
|
|
+ ><el-button type="primary" @click="openDrawer('new')">添加</el-button></el-col
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #right="{ row }">
|
|
|
+ <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', row)">编辑</el-button>
|
|
|
+ <el-button link type="danger" size="small" :icon="Delete" @click="UserDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </TableBase>
|
|
|
+ <Drawer ref="drawerRef" :handleClose="callbackDrawer">
|
|
|
+ <template #header="{ params }">
|
|
|
+ <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 产品</h4>
|
|
|
+ </template>
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
+ <el-divider border-style="dashed" />
|
|
|
+ <el-form-item label="产品名称:" class="m-b-6" :label-width="formLabelWidth" prop="name">
|
|
|
+ <el-input v-model="form.T_name" type="text" autocomplete="off" placeholder="请输入产品名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品分类:" class="m-b-6" :label-width="formLabelWidth" prop="name">
|
|
|
+ <el-select v-model="form.T_class" placeholder="请选择产品分类~">
|
|
|
+ <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品型号:" class="m-b-6" :label-width="formLabelWidth" prop="name">
|
|
|
+ <el-input v-model="form.T_name" type="text" autocomplete="off" placeholder="请输入产品型号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品规格:" class="m-b-6" :label-width="formLabelWidth" prop="name">
|
|
|
+ <el-select v-model="form.T_class" placeholder="请选择产品规格~">
|
|
|
+ <el-option v-for="item in options" :key="item.Id" :label="item.T_name" :value="item.Id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品图片:" class="m-b-6" :label-width="formLabelWidth" prop="name">
|
|
|
+ <Upload></Upload>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item :label-width="formLabelWidth">
|
|
|
+ <el-button v-if="isNew" color="#626aef" @click="AddUserName(ruleFormRef)">提交</el-button>
|
|
|
+ <el-button v-else color="#626aef" @click="AddUserName(ruleFormRef)">修改</el-button>
|
|
|
+ </el-form-item> -->
|
|
|
+ </el-form>
|
|
|
+ </Drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.production-list {
|
|
|
+ height: 100%;
|
|
|
+ .input-suffix {
|
|
|
+ width: 100%;
|
|
|
+ .inline-flex {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+ .w-50 {
|
|
|
+ width: 12.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|