- <template>
- <div class="liquefiedGasCylinderLedger publicContainer">
- <div class="dataTitle">液化气瓶台账</div>
- <el-divider />
- <div class="dataContent">
- <el-row class="dataTop">
- <el-col :span="10">
- <el-input v-model="qlCode" style="width: 320px" placeholder="请输入企业编码">
- <template #suffix>
- <el-icon class="el-input__icon searchBtn"><search /></el-icon>
- </template>
- </el-input>
- </el-col>
- <el-col :span="3">
- <el-button type="primary" icon="Plus" @click="addInfo">新增</el-button>
- <el-button type="primary" plain>批量删除</el-button>
- </el-col>
- </el-row>
-
- <!-- 表单 -->
- <el-table
- :data="tableData"
- style="width: 100%"
- v-setHeight="{ bottom: 60 }"
- v-loading="loading"
- @selection-change="handleSelectionChange"
- >
- <!-- <el-table-column type="index" label="序号" width="50" /> -->
- <el-table-column fixed type="selection" width="30" />
- <el-table-column prop="code" label="企业编码" />
- <el-table-column prop="name" label="气瓶条码" />
- <el-table-column prop="p1" label="自有编码" />
- <el-table-column prop="p2" label="出厂编码">
- <!-- <template #default="{ row }">
- <div>{{ stationType.find(item => item.value == row.p2)?.label || row.p2 }}</div>
- </template> -->
- </el-table-column>
- <el-table-column prop="p3" label="出厂日期" />
- <el-table-column prop="p4" label="制造年月" />
- <el-table-column prop="p5" label="报废日期"> </el-table-column>
- <el-table-column prop="p6" label="使用状态" />
- <el-table-column prop="p7" label="当前持有者名称" />
- <el-table-column prop="p8" label="当前持有者详细地址" />
-
- <el-table-column label="操作" min-width="100">
- <template #default="{ row }">
- <div style="display: flex; justify-content: space-evenly">
- <el-button link type="primary" icon="Edit" @click="addInfo(row)">编辑</el-button>
- <el-button link type="danger" icon="Delete" @click="deleteInfo(row)">删除</el-button>
- </div>
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- class="pagingPosition"
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
- </div>
-
- <!-- 新增 及 修改 -->
- <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="800px">
- <template #header>
- <div class="diaHeader">
- {{ dialogConfig.title }}
- </div>
- </template>
- <el-form :model="addForm" :rules="rules" label-width="auto" ref="ruleAddFormRef">
- <el-row>
- <el-col :span="24">
- <el-form-item label="企业编码" prop="title">
- <el-input v-model="addForm.code" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <el-form-item label="气瓶条码" prop="title">
- <el-input v-model="addForm.name" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="24">
- <el-form-item label="二维码地址" prop="">
- <el-input v-model="addForm.p10" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="自有编码" prop="">
- <el-input v-model="addForm.p1" placeholder="请输入" clearable />
- <!-- <el-select v-model="addForm.p2" style="width: 100%">
- <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select> -->
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="出厂编码" prop="">
- <el-input v-model="addForm.p2" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="出厂日期" prop="">
- <!-- <el-input v-model="addForm.p3" placeholder="请输入" clearable /> -->
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p3"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="制造单位" prop="">
- <el-input v-model="addForm.p7" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="制造年月" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p4"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="建档日期" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p11"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="末检年月" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p12"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="下检年月" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p13"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="报废日期" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p14"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="使用状态" prop="">
- <el-select v-model="addForm.p6" style="width: 100%">
- <el-option v-for="item in stateType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="是否在用重瓶" prop="">
- <!-- <el-input v-model="addForm.p16" placeholder="请输入" clearable /> -->
- <el-radio-group v-model="addForm.p15">
- <el-radio label="1">是</el-radio>
- <el-radio label="2">否</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="是否流转正常" prop="">
- <!-- <el-input v-model="addForm.p17" placeholder="请输入" clearable /> -->
- <el-radio-group v-model="addForm.p16">
- <el-radio label="1">是</el-radio>
- <el-radio label="2">否</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="当前流转环节" prop="">
- <!-- stationType -->
- <el-select v-model="addForm.p17" style="width: 100%">
- <el-option v-for="item in stationType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="当前环节启动时间" prop="">
- <el-date-picker
- placeholder="请选择"
- v-model="addForm.p18"
- type="date"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- style="width: 100%"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row justify="space-between">
- <el-col :span="11">
- <el-form-item label="地市编码" prop="">
- <el-input v-model="addForm.p19" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- <el-col :span="11">
- <el-form-item label="当前持有者名称" prop="">
- <el-input v-model="addForm.p7" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row>
- <el-col :span="24">
- <el-form-item label="详细地址" prop="">
- <el-input v-model="addForm.p8" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row>
- <el-col :span="24">
- <el-form-item label="经纬度" prop="">
- <el-input v-model="addForm.p9" placeholder="请输入" clearable />
- </el-form-item>
- </el-col>
- </el-row>
-
- <el-row class="diaCheck">
- <el-button type="primary" @click="submitForm(ruleAddFormRef)">确 定</el-button>
- <el-button class="cancel" @click="close">取 消</el-button>
- </el-row>
- </el-form>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="liquefiedGasCylinderLedger">
- import { onMounted, reactive, toRefs } from 'vue';
-
- const { proxy } = getCurrentInstance();
-
- const stationType = ref([
- {
- id: 1,
- value: 1,
- label: '充装',
- },
- {
- id: 2,
- value: 2,
- label: '运输',
- },
- {
- id: 3,
- value: 3,
- label: '供应',
- },
- {
- id: 4,
- value: 4,
- label: '配送',
- },
- {
- id: 5,
- value: 5,
- label: '使用',
- },
- {
- id: 5,
- value: 5,
- label: '回收',
- },
- ]);
- const stateType = ref([
- {
- id: 1,
- value: 1,
- label: '正常',
- },
- {
- id: 2,
- value: 2,
- label: '异常',
- },
- ]);
-
- const ruleAddFormRef = ref();
- const total = ref(0);
- const loading = ref(false);
- const queryParams = ref({
- pageNum: 1,
- pageSize: 10,
- });
- const qlCode = ref('');
- const tableData = ref([]);
- const multipleSelection = ref([]); // 多选数据
- const dataList = reactive({
- dialogConfig: {
- title: '',
- open: false,
- },
- addForm: {
- id: undefined,
- code: '',
- name: '',
- p1: '',
- p2: '',
- p3: '',
- p4: '',
- p5: '',
- p6: '',
- p7: '',
- p8: '',
- },
- rules: {
- title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
- content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
- },
- });
-
- const { dialogConfig, addForm, rules } = toRefs(dataList);
-
- // 新增和编辑
- const addInfo = row => {
- dialogConfig.value.open = true;
- if (row.id) {
- addForm.value = row;
- dialogConfig.value.title = '编辑液化气瓶台账';
- } else {
- addForm.value = {
- id: undefined,
- code: '',
- name: '',
- p1: '',
- p2: '',
- p3: '',
- p4: '',
- p5: '',
- p6: '',
- p7: '',
- p8: '',
- p9: '',
- };
- dialogConfig.value.title = '新增液化气瓶台账';
- }
- };
- // 新增和编辑 提交
- const submitForm = formRef => {
- if (!formRef) return;
- formRef.validate(valid => {
- if (valid) {
- console.log('---------', addForm.value);
- // addInfo(addForm.value).then(response => {
- // proxy.$modal.msgSuccess('新增成功');
- // getInfoList();
- // });
- dialogConfig.value.open = false;
- }
- });
- };
-
- const close = () => {
- dialogConfig.value.open = false;
- };
-
- // table多选
- const handleSelectionChange = val => {
- console.log('🚀 ~ handleSelectionChange ~ val:', val);
- multipleSelection.value = val;
- };
-
- // 新增和编辑
-
- // 删除
- const deleteInfo = () => {};
-
- // 获取表单数据
- const getList = () => {
- loading.value = true;
- setTimeout(() => {
- tableData.value = [
- {
- id: '001',
- code: '123456789',
- date: '2022-06-01 12:00:00',
- name: '桥梁名称',
- p1: '1',
- p2: 1,
- p3: '100',
- p4: '100',
- p5: 1,
- p6: '1',
- p7: '34',
- p8: '124',
- },
- {
- id: '002',
- code: '123456789',
- date: '2022-06-01 12:00:00',
- name: '桥梁名称',
- p1: '1',
- p2: 1,
- p3: '100',
- p4: '100',
- p5: 1,
- p6: '1',
- p7: '34',
- p8: '124',
- },
- ];
- total.value = tableData.value.length;
- loading.value = false;
- }, 500);
- };
-
- onMounted(() => {
- getList();
- });
- </script>
-
- <style lang="scss" scoped>
- .liquefiedGasCylinderLedger {
- position: relative;
- width: 100%;
- height: 100%;
- // border: 1px solid red;
- // background: #fff;
- .dataTitle {
- position: relative;
- padding-left: 10px;
- &::before {
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- content: '';
- width: 5px;
- height: 14px;
- background: #2561ef;
- border-radius: 3px;
- }
- }
- .dataContent {
- .dataTop {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 10px;
- }
- }
- }
- .el-divider {
- margin: 10px 0 15px 0;
- }
- .searchBtn {
- cursor: pointer;
- &:hover {
- color: #2561ef;
- }
- }
- .pagingPosition {
- position: absolute !important;
- right: 0px;
- bottom: 0px;
- }
- </style>