|
@@ -0,0 +1,605 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ Storehouse_IOTNetworkCard_Add,
|
|
|
+ Storehouse_IOTNetworkCard_Del,
|
|
|
+ Storehouse_IOTNetworkCard_Edit,
|
|
|
+ Storehouse_IOTNetworkCard_Import,
|
|
|
+ Storehouse_IOTNetworkCard_List,
|
|
|
+} from '@/api/storehouse/index'
|
|
|
+import {nextTick, reactive, ref} from 'vue'
|
|
|
+import Upload from '@/components/Upload/index.vue'
|
|
|
+import Drawer from '@/components/Drawer/index.vue'
|
|
|
+import type {FormInstance, FormRules} from 'element-plus'
|
|
|
+import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
|
|
|
+import {Delete, Edit,View} from '@element-plus/icons-vue'
|
|
|
+import type {ColumnProps} from '@/components/TableBase/interface/index'
|
|
|
+import {useTablePublic} from '@/hooks/useTablePublic'
|
|
|
+import ReceiveUser from "@/views/storehouse/outStock/receiveUser.vue";
|
|
|
+
|
|
|
+let total = 0
|
|
|
+let editStateTitle = ""
|
|
|
+const isNew = ref(true)
|
|
|
+const formLabelWidth = ref('100px')
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
|
+const uploadRef = ref<InstanceType<typeof Upload> | null>(null)
|
|
|
+const {resetForm, globalStore, searchOnTableList, updateOnTableList} = useTablePublic()
|
|
|
+const receiveUserdialog = ref<InstanceType<typeof ReceiveUser> | null>(null)
|
|
|
+const uploadFiles = ref<File[]>([]) // 新增:用于存储上传的文件
|
|
|
+const ImportEdit = ref(false)
|
|
|
+const tableData = ref<any[]>([])
|
|
|
+const multipleSelection = ref<any[]>([])
|
|
|
+const dialogTableVisible = ref(false)
|
|
|
+const editStateVisible = ref(false)
|
|
|
+
|
|
|
+const columns: ColumnProps[] = [
|
|
|
+ {type: 'selection', width: '44px', fixed: 'left'},
|
|
|
+ {type: 'index', label: '序号', width: 80},
|
|
|
+ {prop: 'T_in_date', label: '入库日期'},
|
|
|
+ {prop: 'T_meal_type', label: '套餐类型'},
|
|
|
+ {prop: 'T_meal', label: '套餐'},
|
|
|
+ {prop: 'T_expire', label: '到期&欠费'},
|
|
|
+ {prop: 'T_State', label: '状态'},
|
|
|
+ {prop: 'T_iccid', label: '串码'},
|
|
|
+ {prop: 'T_MSISDN', label: 'MSISDN'},
|
|
|
+ {prop: 'T_out_date', label: '出库日期'},
|
|
|
+ {prop: 'T_out_project', label: '出库项目'},
|
|
|
+ {prop: 'T_receive_name', label: '领用人'},
|
|
|
+ {prop: 'T_remark', label: '备注'},
|
|
|
+ // {prop: 'operation', label: '操作', width: 150, fixed: 'right'}
|
|
|
+]
|
|
|
+
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ T_in_date: [{required: true, message: '请输入入库日期', trigger: 'blur'}],
|
|
|
+ T_State: [{required: true, message: '请选择状态', trigger: 'blur'}],
|
|
|
+ T_iccid: [{required: true, message: '请输入串码', trigger: 'blur'}],
|
|
|
+ T_MSISDN: [{required: true, message: '请输入MSISDN', trigger: 'blur'}],
|
|
|
+})
|
|
|
+const editStateRules = reactive<FormRules>({
|
|
|
+ T_out_date: [{required: true, message: '请输入出库日期', trigger: 'blur'}],
|
|
|
+ T_out_project: [{required: true, message: '请输入出库项目', trigger: 'blur'}],
|
|
|
+ T_receive_name: [{required: true, message: '请选择领用人', trigger: 'blur'}],
|
|
|
+})
|
|
|
+const form: any = ref({
|
|
|
+ T_id: "",
|
|
|
+ T_in_date: '',
|
|
|
+ T_meal_type: '',
|
|
|
+ T_meal: '',
|
|
|
+ T_expire: '',
|
|
|
+ T_iccid: '',
|
|
|
+ T_MSISDN: '',
|
|
|
+ T_out_date: '',
|
|
|
+ T_out_project: '',
|
|
|
+ T_receive: '',
|
|
|
+ T_receive_name: '',
|
|
|
+ T_remark: '',
|
|
|
+ T_State: 1,
|
|
|
+})
|
|
|
+const editStateform: any = ref({
|
|
|
+ T_out_date: '',
|
|
|
+ T_out_project: '',
|
|
|
+ T_receive: '',
|
|
|
+ T_receive_name: '',
|
|
|
+ T_remark: '',
|
|
|
+ T_State: 1,
|
|
|
+})
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const options = reactive([
|
|
|
+ {name: '新卡入库', id: 1},
|
|
|
+ {name: '退还入库', id: 2},
|
|
|
+ {name: '已出库', id: 3},
|
|
|
+ {name: '损坏退还', id: 4},
|
|
|
+ {name: '待注销', id: 5},
|
|
|
+ {name: '已注销', id: 6}
|
|
|
+])
|
|
|
+
|
|
|
+const openDrawer = (type: string, row?: any) => {
|
|
|
+ isNew.value = type === 'new' ? true : false
|
|
|
+ if (type == 'edit') {
|
|
|
+ // form.value.T_id = row.Id
|
|
|
+ // form.value.T_in_date = row.T_in_date
|
|
|
+ // form.value.T_meal_type = row.T_meal_type
|
|
|
+ // form.value.T_meal = row.T_meal
|
|
|
+ // form.value.T_expire = row.T_expire
|
|
|
+ // form.value.T_iccid = row.T_iccid
|
|
|
+ // form.value.T_MSISDN = row.T_MSISDN
|
|
|
+ // form.value.T_out_date = row.T_out_date
|
|
|
+ // form.value.T_out_project = row.T_out_project
|
|
|
+ // form.value.T_receive = row.T_receive
|
|
|
+ // form.value.T_receive_name = row.T_receive_name
|
|
|
+ // form.value.T_State = row.T_State
|
|
|
+ for (let key in form.value) {
|
|
|
+ if (row.hasOwnProperty(key)) {
|
|
|
+ form.value[key] = row[key];
|
|
|
+ }
|
|
|
+ form.value.T_id = row.Id
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ delete form.value.T_id
|
|
|
+ form.value.T_in_date = ''
|
|
|
+ form.value.T_meal_type = ''
|
|
|
+ form.value.T_meal = ''
|
|
|
+ form.value.T_expire = ''
|
|
|
+ form.value.T_iccid = ''
|
|
|
+ form.value.T_MSISDN = ''
|
|
|
+ form.value.T_remark = ''
|
|
|
+ form.value.T_State = 1
|
|
|
+ }
|
|
|
+ drawerRef.value?.openDrawer()
|
|
|
+}
|
|
|
+
|
|
|
+const AddIOTNetworkCard = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ let res: any = {}
|
|
|
+ if (isNew.value) {//新增
|
|
|
+ res = await Storehouse_IOTNetworkCard_Add({User_tokey: globalStore.GET_User_tokey, ...form.value})
|
|
|
+ } else {//编辑
|
|
|
+ res = await Storehouse_IOTNetworkCard_Edit({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ ...form.value,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (res.Code === 200) {
|
|
|
+ ElMessage.success(`物联网卡${isNew.value ? '添加' : '修改'}成功!!`)
|
|
|
+ nextTick(() => {
|
|
|
+ drawerRef.value?.closeDrawer()
|
|
|
+ // updateOnTableList(TableRef.value)
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ isNew.value = true
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const IOTNetworkCardDelete = (row: any) => {
|
|
|
+ ElMessageBox.confirm('您确定要删除该物联网卡吗?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const res: any = await Storehouse_IOTNetworkCard_Del({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ T_id: row.Id
|
|
|
+ })
|
|
|
+ if (res.Code === 200) {
|
|
|
+ ElMessage.success('删除成功!')
|
|
|
+ // nextTick(() => updateOnTableList(TableRef.value))
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage.warning('取消成功!')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const callbackDrawer = (done: () => void) => {
|
|
|
+ resetForm(ruleFormRef.value)
|
|
|
+ uploadRef.value?.clearfileList()
|
|
|
+ done()
|
|
|
+}
|
|
|
+// 搜索
|
|
|
+const initParam = reactive({
|
|
|
+ User_tokey: globalStore.GET_User_tokey,
|
|
|
+ page: 1,
|
|
|
+ page_z: 10,
|
|
|
+ T_name: '',
|
|
|
+ T_state: ''
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 选择领用人
|
|
|
+ */
|
|
|
+const selectApprover = () => receiveUserdialog.value?.openDrawer()
|
|
|
+const getReceiveInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
|
|
|
+ form.value.T_receive = T_uuid
|
|
|
+ form.value.T_receive_name = T_name
|
|
|
+}
|
|
|
+
|
|
|
+const geteditStateReceiveInfo = ({T_uuid, T_name}: { T_uuid: string; T_name: string }) => {
|
|
|
+ editStateform.value.T_receive = T_uuid
|
|
|
+ editStateform.value.T_receive_name = T_name
|
|
|
+}
|
|
|
+
|
|
|
+const handleFileChange = (file: any, fileList: any) => {
|
|
|
+ uploadFiles.value = fileList.map((item: any) => item.raw) // 新增:更新上传文件列表
|
|
|
+}
|
|
|
+const submitUpload = async () => {
|
|
|
+ if (uploadFiles.value.length === 0) {
|
|
|
+ // 修改:使用 uploadFiles.value
|
|
|
+ ElMessage.warning('请先选择文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const formData = new FormData()
|
|
|
+ uploadFiles.value.forEach((file: File) => {
|
|
|
+ // 修改:遍历 uploadFiles.value
|
|
|
+ formData.append('file', file)
|
|
|
+ })
|
|
|
+ const loading = ElLoading.service({
|
|
|
+ // 新增:显示加载动画
|
|
|
+ lock: true,
|
|
|
+ text: '正在上传文件...',
|
|
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
|
+ })
|
|
|
+ try {
|
|
|
+ const result: any = await Storehouse_IOTNetworkCard_Import(formData)
|
|
|
+ if (result.Code === 200) {
|
|
|
+ ElMessage.success('文件上传成功')
|
|
|
+ // 处理上传成功后的逻辑
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+ uploadFiles.value = [] // 新增:清除文件上传列表
|
|
|
+ ImportEdit.value = false
|
|
|
+ } else {
|
|
|
+ ElMessage.error('文件上传失败')
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('文件上传失败,请检查网络连接')
|
|
|
+ } finally {
|
|
|
+ loading.close() // 新增:关闭加载动画
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const getIOTNetworkCard_List = async () => {
|
|
|
+ const res: any = await Storehouse_IOTNetworkCard_List(initParam)
|
|
|
+ tableData.value = res.Data.Data || []
|
|
|
+ total = res.Data.Num
|
|
|
+}
|
|
|
+getIOTNetworkCard_List()
|
|
|
+// 搜索模型
|
|
|
+const searchModelHandle = () => {
|
|
|
+ total = 0
|
|
|
+ initParam.page = 1
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSelectionChange = (val: any[]) => {
|
|
|
+ multipleSelection.value = val
|
|
|
+ console.log(multipleSelection.value)
|
|
|
+}
|
|
|
+const selectableDisable = (row: any) => {
|
|
|
+ if (row.Id === 0) return false
|
|
|
+ return true
|
|
|
+}
|
|
|
+const handleSizeChange = (val: number) => {//分页改变
|
|
|
+ initParam.page_z = val
|
|
|
+ //下面调用列表的接口
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+}
|
|
|
+const handleCurrentChange = (val: number) => {//条数改变
|
|
|
+ initParam.page = val
|
|
|
+ //下面调用列表的接口
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+}
|
|
|
+// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
|
|
|
+const getRowKey = (row: any) => {
|
|
|
+ return row.Id
|
|
|
+}
|
|
|
+
|
|
|
+// 修改状态
|
|
|
+const openEditStateDialog = (state: number) => {
|
|
|
+ if (multipleSelection.value.length === 0) {
|
|
|
+ ElMessage.warning('请选择物联网卡!!!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ editStateform.value.T_out_date = ''
|
|
|
+ editStateform.value.T_out_project = ''
|
|
|
+ editStateform.value.T_receive = ''
|
|
|
+ editStateform.value.T_remark = ''
|
|
|
+ editStateform.value.T_State = state
|
|
|
+ if (state === 3) {
|
|
|
+ editStateTitle = '出库'
|
|
|
+ }
|
|
|
+ if (state === 4) {
|
|
|
+ editStateTitle = '退还'
|
|
|
+ }
|
|
|
+ if (state === 5) {
|
|
|
+ editStateTitle = '待注销'
|
|
|
+ }
|
|
|
+ if (state === 6) {
|
|
|
+ editStateTitle = '注销'
|
|
|
+ }
|
|
|
+ editStateVisible.value = true
|
|
|
+
|
|
|
+}
|
|
|
+const editState = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (multipleSelection.value.length === 0) {
|
|
|
+ ElMessage.warning('请选择物联网卡!!!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!formEl) return
|
|
|
+ formEl.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ for await (let item of multipleSelection.value) {
|
|
|
+ Storehouse_IOTNetworkCard_Edit({ T_id: item.Id , ...editStateform.value})
|
|
|
+ }
|
|
|
+ ElMessage.success('提交成功!!!')
|
|
|
+
|
|
|
+ nextTick(() => {
|
|
|
+ multipleSelection.value = []
|
|
|
+ })
|
|
|
+ getIOTNetworkCard_List()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const gridData:any = ref([])
|
|
|
+const preview = (list:any) => {
|
|
|
+ gridData.value = list || []
|
|
|
+
|
|
|
+ dialogTableVisible.value = true
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="iotnetworkcard-list">
|
|
|
+ <el-card class="m-b-3">
|
|
|
+ <div class="input-suffix">
|
|
|
+ <el-row :gutter="20" style="margin-bottom: 0">
|
|
|
+ <el-col :xl="6" :lg="6" :md="5">
|
|
|
+ <span class="inline-flex items-center">关键字:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="initParam.T_name"
|
|
|
+ type="text"
|
|
|
+ class="w-50 m-2"
|
|
|
+ placeholder="按串码、MSISDN搜索"
|
|
|
+ @change="searchOnTableList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="6" :lg="7" :md="8">
|
|
|
+ <span class="inline-flex items-center">状态:</span>
|
|
|
+ <el-select v-model="initParam.T_state" class="w-50 m-2" clearable placeholder="请选择状态~">
|
|
|
+ <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" @click="searchModelHandle">搜索</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="10" :lg="11" :md="11" class="btn">
|
|
|
+ <el-button type="primary" @click="openDrawer('new')">入库</el-button>
|
|
|
+ <el-button type="success" @click="ImportEdit = true">导入</el-button>
|
|
|
+ <el-button type="primary" @click="openEditStateDialog(3)">出库</el-button>
|
|
|
+ <el-button type="success" @click="openEditStateDialog(4)">退还</el-button>
|
|
|
+ <el-button type="warning" @click="openEditStateDialog(5)">待注销</el-button>
|
|
|
+ <el-button type="info" @click="openEditStateDialog(6)">注销</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="table-card">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :row-key="getRowKey"
|
|
|
+ :highlight-current-row="true"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ >
|
|
|
+ <template v-for="(item, index) in columns" :key="index">
|
|
|
+ <el-table-column
|
|
|
+ show-overflow-tooltip
|
|
|
+ v-if="item.type === 'index' || item.fixed === 'left' || item.type === 'selection'"
|
|
|
+ :selectable="selectableDisable"
|
|
|
+ :type="item.type"
|
|
|
+ align="center"
|
|
|
+ v-bind="item"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-else-if="item.prop === 'T_State'"
|
|
|
+ :selectable="selectableDisable"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-text v-if="scope.row.T_State === 1" type="success">新卡入库</el-text>
|
|
|
+ <el-text v-if="scope.row.T_State === 2" type="success">退还入库</el-text>
|
|
|
+ <el-text v-if="scope.row.T_State === 3" type="primary">已出库</el-text>
|
|
|
+ <el-text v-if="scope.row.T_State === 4" type="danger">损坏退还</el-text>
|
|
|
+ <el-text v-if="scope.row.T_State === 5" type="warning">待注销</el-text>
|
|
|
+ <el-text v-if="scope.row.T_State === 6" type="info">已注销</el-text>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-else
|
|
|
+ :selectable="selectableDisable"
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ label-class-name="label-table"
|
|
|
+ show-overflow-tooltip
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ fixed="right"
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="230">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" size="small" :icon="View" @click="preview(scope.row.T_record)">查看记录</el-button>
|
|
|
+ <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', scope.row)">编辑
|
|
|
+ </el-button>
|
|
|
+ <el-button link type="danger" size="small" :icon="Delete"
|
|
|
+ @click="IOTNetworkCardDelete(scope.row)">删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="initParam.page"
|
|
|
+ v-model:page-size="initParam.page_z"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <Drawer ref="drawerRef" :handleClose="callbackDrawer" size="45%">
|
|
|
+ <template #header="{ params }">
|
|
|
+ <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '入库' : '编辑' }} - 物联网卡</h4>
|
|
|
+ </template>
|
|
|
+ <el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
+ <el-form-item label="入库日期:" class="m-b-6" :label-width="formLabelWidth" prop="T_in_date">
|
|
|
+ <el-date-picker
|
|
|
+ class="my-date-picker"
|
|
|
+ style="width: 21.5rem"
|
|
|
+ v-model="form.T_in_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="套餐类型:" class="m-b-6" :label-width="formLabelWidth" prop="T_meal_type">
|
|
|
+ <el-input v-model="form.T_meal_type" type="text" class="w-50" placeholder="请填写套餐类型"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="套餐:" class="m-b-6" :label-width="formLabelWidth" prop="T_meal">
|
|
|
+ <el-input v-model="form.T_meal" type="text" autocomplete="off" class="w-50"
|
|
|
+ placeholder="请填写套餐"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="到期&欠费:" class="m-b-6" :label-width="formLabelWidth" prop="T_expire">
|
|
|
+ <el-input v-model="form.T_expire" type="text" autocomplete="off" class="w-50"
|
|
|
+ placeholder="请填写到期&欠费"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:" class="m-b-6" :label-width="formLabelWidth" prop="T_State">
|
|
|
+ <el-select v-model="form.T_State" class="w-50 m-2" clearable placeholder="请选择状态~">
|
|
|
+ <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="串码:" class="m-b-6" :label-width="formLabelWidth" prop="T_iccid">
|
|
|
+ <el-input v-model="form.T_iccid" type="text" autocomplete="off" class="w-50"
|
|
|
+ placeholder="请填写串码"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="MSISDN:" class="m-b-6" :label-width="formLabelWidth" prop="T_MSISDN">
|
|
|
+ <el-input v-model="form.T_MSISDN" type="text" autocomplete="off" class="w-50"
|
|
|
+ placeholder="请填写MSISDN"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="!isNew" label="出库日期:" class="m-b-6" :label-width="formLabelWidth"
|
|
|
+ prop="T_out_date">
|
|
|
+ <el-date-picker
|
|
|
+ class="my-date-picker"
|
|
|
+ style="width: 21.5rem"
|
|
|
+ v-model="form.T_out_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="!isNew" label="出库项目:" :label-width="formLabelWidth" prop="T_out_project">
|
|
|
+ <el-input v-model="form.T_out_project" type="text" class="w-50" placeholder="请填写出库项目"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="!isNew" label="领用人:" class="m-b-6" :label-width="formLabelWidth"
|
|
|
+ prop="T_receive_name">
|
|
|
+ <el-input v-model="form.T_receive_name" placeholder="请选择领用人" class="w-50"
|
|
|
+ @focus="selectApprover"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注:" :label-width="formLabelWidth" prop="T_remark">
|
|
|
+ <el-input v-model="form.T_remark" type="text" class="w-50" placeholder="请填写备注"/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item :label-width="formLabelWidth">
|
|
|
+ <el-button v-if="isNew" color="#626aef" @click="AddIOTNetworkCard(ruleFormRef)">提交</el-button>
|
|
|
+ <el-button v-else color="#626aef" @click="AddIOTNetworkCard(ruleFormRef)">修改</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="getReceiveInfo" title="选择领用人"/>
|
|
|
+
|
|
|
+ </Drawer>
|
|
|
+ <el-dialog title="导入" v-model="ImportEdit" width="50%">
|
|
|
+ <el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" @change="handleFileChange">
|
|
|
+ <template #trigger>
|
|
|
+ <el-button type="primary">选择文件</el-button>
|
|
|
+ </template>
|
|
|
+ <el-button style="margin-left: 10px;" type="success" @click="submitUpload"> 导入</el-button>
|
|
|
+
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip">
|
|
|
+ 只能上传excel文件
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogTableVisible" title="查看记录" draggable>
|
|
|
+ <el-table :data="gridData" border max-height="500">
|
|
|
+ <el-table-column type="index" label="序号" width="100" />
|
|
|
+ <el-table-column property="T_data" label="日期" />
|
|
|
+ <el-table-column property="T_State_name" label="状态" />
|
|
|
+ <el-table-column property="T_out_project" label="出库项目" />
|
|
|
+ <el-table-column property="T_remark" label="备注" />
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog v-model="editStateVisible" :title=editStateTitle draggable :destroy-on-close=true>
|
|
|
+ <el-form ref="ruleFormRef" :model="editStateform" :rules="editStateRules">
|
|
|
+ <el-form-item v-if="editStateTitle==='出库'" label="出库日期:" class="m-b-6" :label-width="formLabelWidth"
|
|
|
+ prop="T_out_date">
|
|
|
+ <el-date-picker
|
|
|
+ class="my-date-picker"
|
|
|
+ style="width: 21.5rem"
|
|
|
+ v-model="editStateform.T_out_date"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="editStateTitle==='出库'" label="出库项目:" :label-width="formLabelWidth" prop="T_out_project">
|
|
|
+ <el-input v-model="editStateform.T_out_project" type="text" class="w-50" placeholder="请填写出库项目"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="editStateTitle==='出库'" label="领用人:" class="m-b-6" :label-width="formLabelWidth"
|
|
|
+ prop="T_receive_name">
|
|
|
+ <el-input v-model="editStateform.T_receive_name" placeholder="请选择领用人" class="w-50"
|
|
|
+ @focus="selectApprover"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注:" :label-width="formLabelWidth" prop="T_remark">
|
|
|
+ <el-input v-model="editStateform.T_remark" type="text" class="w-50" placeholder="请填写备注"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label-width="formLabelWidth">
|
|
|
+ <el-button color="#626aef" @click="editState(ruleFormRef)">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <ReceiveUser ref="receiveUserdialog" :dept_leader="0" @onUserInfo="geteditStateReceiveInfo" title="选择领用人"/>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.iotnetworkcard-list {
|
|
|
+ .input-suffix {
|
|
|
+ width: 100%;
|
|
|
+ .inline-flex {
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ }
|
|
|
+ .w-50 {
|
|
|
+ width: 12.5rem
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .w-50 {
|
|
|
+ width: 21.5rem
|
|
|
+ }
|
|
|
+}
|
|
|
+.pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+</style>
|