完善单位物料功能

Web/src/views/basics-date/matter/component/editClassifyOpenAccess.vue

@@ -1,164 +1,171 @@
 <!-- 物料 -->
 <template>
-    <div class="sys-open-access-container">
-        <el-dialog v-model="state.isShowDialog" :title="props.title" width="1000">
-            <el-form :inline="true" :model="ruleForm" class="demo-form-inline" label-width="90px">
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="物料类型" :rules="[{ required: true, message: '物料类型不能为空', trigger: 'blur' }]">
-                            <el-input v-model="ruleForm.name" placeholder="请输入名称" clearable maxlength="32" />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
-            <el-row style="display: flex; justify-content: space-around;">
-                <el-button style="width: 100px;" type="primary" @click="matterSubmit">提交</el-button>
-                <el-button style="width: 100px;" @click="closeDialog">取消</el-button>
-            </el-row>
-        </el-dialog>
-    </div>
+  <div class="sys-open-access-container">
+    <el-dialog v-model="state.isShowDialog" :title="props.title" width="1000">
+      <el-form ref="ruleFormRef" :inline="true" :model="ruleForm" class="demo-form-inline" label-width="90px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="物料类型" :rules="[{ required: true, message: '物料类型不能为空', trigger: 'blur' }]">
+              <el-input v-model="ruleForm.name" placeholder="请输入名称" clearable maxlength="32"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+				<span class="dialog-footer">
+          <el-button style="width: 100px;" type="primary" @click="matterSubmit">提交</el-button>
+          <el-button style="width: 100px;" @click="closeDialog">取消</el-button>
+				</span>
+      </template>
+
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
-import { getAPI } from '/@/utils/axios-utils';
-import { BrandApi, MaterialClassifyApi, PackageInfoApi, SysUnitGroupApi,SysUnitApi } from '/@/api-services/api';
-import { AddMaterialsInput, BrandOutput, MaterialsOutput, PackageInfoOutput, SysUnitGroupOutput, SysUnitOutput} from '/@/api-services/models';
-import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
-import { addMaterials, updateMaterials,detailMaterials } from '/@/api/main/materials';
-import { listUnitGroup } from '/@/api/main/unit';
+import {onMounted, reactive, ref} from 'vue';
+import {getAPI} from '/@/utils/axios-utils';
+import {
+  MaterialClassifyApi,
+} from '/@/api-services/api';
+import {
+  MaterialsOutput,
+  SysUnitGroupOutput,
+  SysUnitOutput, UpdateMaterialClassifyInput
+} from '/@/api-services/models';
+import {ElMessageBox, ElMessage, TabsPaneContext} from 'element-plus';
 import {addMaterialsClassify, detailMaterialsClassify, updateMaterialsClassify} from "/@/api/main/materialClassify";
 
 const props = defineProps({
-	title: String,
-	orgData: Array<MaterialsOutput>,
+  title: String,
+  orgData: Array<MaterialsOutput>,
 });
-	//父级传递来的函数，用于回调
-	const emit = defineEmits(["reloadTable"]);
+//父级传递来的函数，用于回调
+const emit = defineEmits(["reloadTable"]);
 
 //获取物料分类
 let fyListData = ref();
 
 const fyListGet = async () => {
-    let res = await getAPI(MaterialClassifyApi).apiMaterialClassifyListGet();
-    if (res.data.code === 200) {
-        fyListData.value = res.data.result;
-    }
+  let res = await getAPI(MaterialClassifyApi).apiMaterialClassifyListGet();
+  if (res.data.code === 200) {
+    fyListData.value = res.data.result;
+  }
 }
-
-const ruleForm = ref<any>({});
+const ruleFormRef = ref();
 
 const state = reactive({
-	loading: false,
-    isShowDialog:false,
-    editClassifyOpenAccessTitle:'新增',
-	tableData: [] ,//as Array<MaterialsOutput>
-    orgTreeData: [] ,//as Array<MaterialsOutput>
-    //matterFrom: {} ,//as AddMaterialsInput
-	queryParams: {
-		name: undefined,
-	},
-	tableParams: {
-		page: 1,
-		pageSize: 10,
-		total: 0 as any,
-	},
-	editPrintTitle: '',
-    unitGroupData:[] as Array<SysUnitGroupOutput>,
-    unitData:[] as Array<SysUnitOutput>,
+  loading: false,
+  isShowDialog: false,
+  editClassifyOpenAccessTitle: '新增',
+  tableData: [],//as Array<MaterialsOutput>
+  orgTreeData: [],//as Array<MaterialsOutput>
+  //matterFrom: {} ,//as AddMaterialsInput
+  queryParams: {
+    name: undefined,
+  },
+  tableParams: {
+    page: 1,
+    pageSize: 10,
+    total: 0 as any,
+  },
+  editPrintTitle: '',
+  unitGroupData: [] as Array<SysUnitGroupOutput>,
+  unitData: [] as Array<SysUnitOutput>,
+  ruleForm: {} as UpdateMaterialClassifyInput,
 });
 
 // 打开弹窗
 const openDialog = async (row: any) => {
-	//ruleFormRef.value?.resetFields();
-	//state.selectedTabName = '0'; // 重置为第一个 tab 页
-    let rowData = JSON.parse(JSON.stringify(row));
-		if (rowData.id)
-        ruleForm.value = (await detailMaterialsClassify(rowData.id)).data.result;
-		else{
-            ruleForm.value = rowData;
-            ruleForm.value.isEnable=true;
-        }
-	state.isShowDialog = true;
+  ruleFormRef.value?.resetFields();
+  //state.selectedTabName = '0'; // 重置为第一个 tab 页
+  let rowData = JSON.parse(JSON.stringify(row));
+  if (rowData.id)
+    state.ruleForm = (await detailMaterialsClassify(rowData.id)).data.result;
+  else {
+    state.ruleForm = rowData;
+  }
+  state.isShowDialog = true;
 };
 
-	// 关闭弹窗
-	const closeDialog = () => {
-		state.isShowDialog = false;
-	};
+// 关闭弹窗
+const closeDialog = () => {
+  state.isShowDialog = false;
+};
 
 onMounted(() => {
-    fyListGet();
+  fyListGet();
 });
 
 //提交
-const matterSubmit = async () => {
+const matterSubmit = () => {
+  ruleFormRef.value.validate(async (valid: boolean) => {
+    if (!valid) return;
     let res;
-    if (props.title=='添加物料类型'){
-        res = await addMaterialsClassify(ruleForm.value);
-    }
-    else {
-        res = await updateMaterialsClassify(ruleForm.value);
+    if (props.title == '添加物料类型') {
+      res = await addMaterialsClassify(state.ruleForm);
+    } else {
+      res = await updateMaterialsClassify(state.ruleForm);
     }
     //console.log(res)
 
     if (res.data.code == 200) {
-        state.isShowDialog = false;
-        ElMessage({
-            message: '成功',
-            type: 'success',
-        })
-        //state.tableData.handleList();
-    } 
-    else
-        ElMessage.error(res.message!)
+      state.isShowDialog = false;
+      ElMessage({
+        message: '成功',
+        type: 'success',
+      })
+      //state.tableData.handleList();
+    } else
+      ElMessage.error(res.message!)
     emit("reloadTable");
     closeDialog();
+  });
+
 }
 
 
-
 // 导出对象
-defineExpose({ openDialog });
+defineExpose({openDialog});
 </script>
 
 <style lang="scss" scoped>
 .main {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+
+  .main-from {
+    // height: 300px;
+    width: 100%;
+    padding: 20px 10px;
+
+    .el-row {
+      width: 100%;
+    }
+  }
+
+  .main-table {
+    margin-top: 20px;
+    box-sizing: border-box;
     padding: 10px;
+    flex-grow: 1;
+    height: 0;
+
     display: flex;
     flex-direction: column;
 
-    .main-from {
-        // height: 300px;
-        width: 100%;
-        padding: 20px 10px;
-
-        .el-row {
-            width: 100%;
-        }
+    .tab {
+      flex: 1;
+      overflow: scroll;
     }
 
-    .main-table {
-        margin-top: 20px;
-        box-sizing: border-box;
-        padding: 10px;
-        flex-grow: 1;
-        height: 0;
-
-        display: flex;
-        flex-direction: column;
-
-        .tab {
-            flex: 1;
-            overflow: scroll;
-        }
-
-        .tab-hed {
-            display: flex;
-            justify-content: space-between;
-            margin: 5px;
-            align-items: center;
-        }
+    .tab-hed {
+      display: flex;
+      justify-content: space-between;
+      margin: 5px;
+      align-items: center;
     }
+  }
 }
 </style>

Web/src/views/basics-date/unit/index.vue

@@ -1,388 +1,402 @@
 <template>
-    <div class="main">
-        <div class="main-from common-box">
-            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="名称">
-                            <el-input v-model="formInline.name" placeholder="请输入名称" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="编码">
-                            <el-input v-model="formInline.codeNum" placeholder="请输入编码" clearable />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
+  <div class="main">
+    <div class="main-from common-box">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="名称">
+              <el-input v-model="formInline.name" placeholder="请输入名称" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="编码">
+              <el-input v-model="formInline.codeNum" placeholder="请输入编码" clearable/>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-                <el-form-item>
-                    <el-button type="primary" @click="unitPage({groupUnitId:data.selectUnitGroupId})">查询</el-button>
-                    <el-button type="primary" @click="addUnit">新增</el-button>
-                    <el-button @click="''">启用</el-button>
-                    <el-button @click="''">禁用</el-button>
-                </el-form-item>
-            </el-form>
+        <el-form-item>
+          <el-button type="primary" @click="unitPage({groupUnitId:data.selectUnitGroupId})">查询</el-button>
+          <el-button type="primary" @click="addUnit">新增</el-button>
+          <el-button @click="''">启用</el-button>
+          <el-button @click="''">禁用</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="main-table common-box">
+      <div class="tab-left">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+          <div>
+            单位组
+          </div>
+          <div>
+            <el-button type="success" link
+                       @click.prevent="addUnitGroup"
+                       style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding:  0 3px;">
+              新增
+            </el-button>
+          </div>
         </div>
+        <div style="height: 100%;">
+          <vxe-table show-overflow height="100%" :data="data.unitGroup" :border=true
+                     :tree-config="{ transform: true }" :scroll-y="{ gt: 20 }" @radio-change="radioChangeEvent">
+            <vxe-column type="radio" title="单选" width="60" fixed="left">
+            </vxe-column>
 
-        <div class="main-table common-box">
-            <div class="tab-left">
-                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
-                    <div>
-                        单位组
-                    </div>
-                    <div>
-                        <el-button type="success" link
-                        @click.prevent="addUnitGroup"
-                            style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding:  0 3px;">新增</el-button>
-                    </div>
-                </div>
-                <div style="height: 100%;">
-                    <vxe-table show-overflow height="100%" :data="data.unitGroup" :border=true
-                        :tree-config="{ transform: true }" :scroll-y="{ gt: 20 }" @radio-change="radioChangeEvent">
-                        <vxe-column type="radio" title="单选" width="60" fixed="left">
-                        </vxe-column>
-
-                        <vxe-column field="name" sortable title="名称" width=""></vxe-column>
-
-                        <vxe-column title="状态" width="" fixed="right" show-overflow>
-                            <template #default="{ row }">
-                                {{ row.isEnable ? '启用' : '关闭' }}
-                                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
-                            </template>
-                        </vxe-column>
-                        <vxe-column title="操作" width="150" fixed="right" show-overflow>
-                            <template #default="{ row }">
-                                <vxe-button type="text" @click="editUnitGroup(row)" icon="vxe-icon-edit">修改</vxe-button>
-                                <vxe-button type="text" @click="deleteUnitGroup(row)" icon="vxe-icon-delete" style="color: rgb(223, 65, 65)">删除</vxe-button>
-                                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
-                            </template>
-                        </vxe-column>
-                    </vxe-table>
-                </div>
-            </div>
-            <div class="tab" style="overflow: hidden;margin-top:29px">
-                <div>
-                  <el-table
-                      ref="multipleTableRef"
-                      :data="data.unit"
-                      style="width: 100%"
-                      v-loading="loading"
-                      tooltip-effect="light"
-                      row-key="id"
-                      border="">
-                    <el-table-column type="selection" width="60" />
-                    <el-table-column prop="codeNum" label="编码"  show-overflow-tooltip="" />
-                    <el-table-column prop="name" label="名称" show-overflow-tooltip="" />
-                    <el-table-column prop="code" label="代码"  show-overflow-tooltip="" />
-                    <el-table-column prop="isEnable" label="可用状态"  show-overflow-tooltip="">
-                      <template #default="scope">
-                        {{ scope.row.isEnable ? '启用' : '关闭' }}
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="childUnitCount" label="子单位数" show-overflow-tooltip="" />
-                    <el-table-column prop="rate" label="换算率" show-overflow-tooltip="" />
-                    <el-table-column prop="isEnable" label="作为基本单位"  show-overflow-tooltip="">
-                      <template #default="scope">
-                        {{ scope.row.isBaseUnit ? '是' : '否' }}
-                      </template>
-                    </el-table-column>
-                    <el-table-column prop="updateUserName" label="修改人" show-overflow-tooltip="" />
-                    <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip="" />
-                    <el-table-column width="200" label="操作"align="center" fixed="right" show-overflow-tooltip="" v-if="auth('materials:update') || auth('materials:delete')">
-                      <template #default="scope">
-                        <vxe-button type="text" @click="editUnit(scope.row)" icon="vxe-icon-edit">修改</vxe-button>
-                        <vxe-button type="text" @click="deleteUnit(scope.row)" icon="vxe-icon-delete" style="color: rgb(223, 65, 65)">删除</vxe-button>
-                      </template>
-                    </el-table-column>
-                  </el-table>
-
-
-<!--                  <vxe-table show-overflow height="100%" :data="data.unit" :border=true-->
-<!--                        :tree-config="{ transform: true }" :scroll-y="{ gt: 20 }">-->
-<!--                        <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>-->
-
-<!--                        <vxe-column field="codeNum" sortable title="编码" width=""></vxe-column>-->
-<!--                        <vxe-column field="name" sortable title="名称" width=""></vxe-column>-->
-<!--                        <vxe-column field="code" sortable title="代码" width=""></vxe-column>-->
-
-<!--                        <vxe-column sortable title="可用状态" width="">-->
-<!--                            <template #default="{ row }">-->
-<!--                                {{ row.isEnable ? '启用' : '关闭' }}-->
-<!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
-<!--                            </template>-->
-<!--                        </vxe-column>-->
-<!--                        <vxe-column field="childUnitCount" sortable title="子单位数" width=""></vxe-column>-->
-<!--                        <vxe-column field="rate" sortable title="换算率" width=""></vxe-column>-->
-<!--                        <vxe-column field="isBaseUnit" sortable title="作为基本单位" width="">-->
-<!--                            <template #default="{ row }">-->
-<!--                                {{ row.isBaseUnit ? '是' : '否' }}-->
-<!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
-<!--                            </template>-->
-<!--                        </vxe-column>-->
-<!--                        <vxe-column title="操作" width="200" fixed="right" show-overflow>-->
-<!--                            <template #default="{ row }">-->
-<!--                                <vxe-button type="text" @click="editUnit(row)" icon="vxe-icon-edit">修改</vxe-button>-->
-<!--                                <vxe-button type="text" @click="deleteUnit(row)" icon="vxe-icon-delete" style="color: rgb(223, 65, 65)">删除</vxe-button>-->
-<!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
-<!--                            </template>-->
-<!--                        </vxe-column>-->
-<!--                    </vxe-table>-->
-                </div>
-              <div style="line-height: 35px">
-              <el-pagination
-                  v-model:currentPage="tableParams.page"
-                  v-model:page-size="tableParams.pageSize"
-                  :total="tableParams.total"
-                  :page-sizes="[10, 20, 50, 100, 200, 500]"
-                  small=""
-                  background=""
-                  @size-change="handleSizeChange"
-                  @current-change="handleCurrentChange"
-                  layout="total, sizes, prev, pager, next, jumper"
-
-              />
-              </div>
-<!--                <div>-->
-<!--                    <vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"-->
-<!--                        :total="pageVO1.total" />-->
-<!--                </div>-->
-            </div>
+            <vxe-column field="name" sortable title="名称" width=""></vxe-column>
 
+            <vxe-column title="状态" width="" fixed="right" show-overflow>
+              <template #default="{ row }">
+                {{ row.isEnable ? '启用' : '关闭' }}
+                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
+              </template>
+            </vxe-column>
+            <vxe-column title="操作" width="150" fixed="right" show-overflow>
+              <template #default="{ row }">
+                <vxe-button type="text" @click="editUnitGroup(row)" icon="vxe-icon-edit">修改</vxe-button>
+                <vxe-button type="text" @click="deleteUnitGroup(row)" icon="vxe-icon-delete"
+                            style="color: rgb(223, 65, 65)">删除
+                </vxe-button>
+                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
+              </template>
+            </vxe-column>
+          </vxe-table>
         </div>
-        <el-dialog v-model="dialogTableVisible" :title="mTitle" width="860">
-            <el-form :inline="true" :model="unitFrom" class="demo-form-inline" label-width="80px">
-                <el-row>
+      </div>
+      <div class="tab" style="overflow: hidden;margin-top:29px">
+        <div>
+          <el-table
+              ref="multipleTableRef"
+              :data="data.unit"
+              style="width: 100%"
+              v-loading="loading"
+              tooltip-effect="light"
+              row-key="id"
+              border="">
+            <el-table-column type="selection" width="60"/>
+            <el-table-column prop="codeNum" label="编码" show-overflow-tooltip=""/>
+            <el-table-column prop="name" label="名称" show-overflow-tooltip=""/>
+            <el-table-column prop="code" label="代码" show-overflow-tooltip=""/>
+            <el-table-column prop="isEnable" label="可用状态" show-overflow-tooltip="">
+              <template #default="scope">
+                {{ scope.row.isEnable ? '启用' : '关闭' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="childUnitCount" label="子单位数" show-overflow-tooltip=""/>
+            <el-table-column prop="rate" label="换算率" show-overflow-tooltip=""/>
+            <el-table-column prop="isEnable" label="作为基本单位" show-overflow-tooltip="">
+              <template #default="scope">
+                {{ scope.row.isBaseUnit ? '是' : '否' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="updateUserName" label="修改人" show-overflow-tooltip=""/>
+            <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip=""/>
+            <el-table-column width="200" label="操作" align="center" fixed="right" show-overflow-tooltip=""
+                             v-if="auth('materials:update') || auth('materials:delete')">
+              <template #default="scope">
+                <vxe-button type="text" @click="editUnit(scope.row)" icon="vxe-icon-edit">修改</vxe-button>
+                <vxe-button type="text" @click="deleteUnit(scope.row)" icon="vxe-icon-delete"
+                            style="color: rgb(223, 65, 65)">删除
+                </vxe-button>
+              </template>
+            </el-table-column>
+          </el-table>
 
-                    <el-col :span="8">
-                        <el-form-item label="名称" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
-                            <el-input v-model="unitFrom.name" placeholder="请输入名称" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="编码" :rules="[{ required: true, message: '编码不能为空', trigger: 'blur' }]">
-                            <el-input v-model="unitFrom.codeNum" placeholder="请输入编码" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="单位组" :rules="[{ required: true, message: '单位组不能为空', trigger: 'blur' }]">
-                            <el-select v-model="unitFrom.groupUnitId" placeholder="请选择" clearable>
-                                <el-option :label="item.name" :value="item.id" v-for="item, index in data.unitGroup"
-                                    :key="index" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="精度">
-                            <el-input v-model="unitFrom.accuracy" placeholder="请输入" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="子单位数" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
-                            <el-input v-model="unitFrom.childUnitCount" placeholder="下级单位数量" clearable />
-                        </el-form-item>
-                    </el-col>
-                   
-                    <el-col :span="8">
-                        <el-form-item label="换算率" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
-                            <el-input v-model="unitFrom.rate" placeholder="基本单位数量" clearable />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="代码">
-                            <el-input v-model="unitFrom.code" placeholder="请输入" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="外部编码">
-                            <el-input v-model="unitFrom.externalNumber" placeholder="请输入" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="备注">
-                            <el-input v-model="unitFrom.remarks" placeholder="请输入" clearable />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="基本单位">
-                        <el-switch v-model="unitFrom.isBaseUnit" inline-prompt active-text="是" inactive-text="否" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                    <el-form-item label="是否启用">
-                        <el-switch v-model="unitFrom.isEnable" inline-prompt active-text="启用" inactive-text="禁用" />
-                    </el-form-item>
-                </el-col>
-                </el-row>
-                
-            </el-form>
-            <el-row style="display: flex; justify-content: space-around;">
-                <el-button style="width: 100px;" type="primary" @click="unitSubmit">提交</el-button>
-                <el-button style="width: 100px;" @click="dialogTableVisible = false">取消</el-button>
-            </el-row>
-        </el-dialog>
 
-        <el-dialog v-model="isShowDialog" :title="mGroupTitle" ref="ruleFormRef" :width="800" >
-			<template #header>
-				<div style="color: #fff">
-					<span>单位组</span>
-				</div>
-			</template>
-			<el-form :model="unitGroupModel"  label-width="auto" :rules="rules">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="名称" prop="name">
-							<el-input v-model="unitGroupModel.name" placeholder="请输入名称" maxlength="32" show-word-limit clearable />
-						</el-form-item>
-					</el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
-						<el-form-item label="是否启用" prop="isEnable">
-							<el-switch v-model="unitGroupModel.isEnable" active-text="是" inactive-text="否" />
-						</el-form-item>
-					</el-col>
-			</el-form>
-			<template #footer>
+          <!--                  <vxe-table show-overflow height="100%" :data="data.unit" :border=true-->
+          <!--                        :tree-config="{ transform: true }" :scroll-y="{ gt: 20 }">-->
+          <!--                        <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>-->
+
+          <!--                        <vxe-column field="codeNum" sortable title="编码" width=""></vxe-column>-->
+          <!--                        <vxe-column field="name" sortable title="名称" width=""></vxe-column>-->
+          <!--                        <vxe-column field="code" sortable title="代码" width=""></vxe-column>-->
+
+          <!--                        <vxe-column sortable title="可用状态" width="">-->
+          <!--                            <template #default="{ row }">-->
+          <!--                                {{ row.isEnable ? '启用' : '关闭' }}-->
+          <!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
+          <!--                            </template>-->
+          <!--                        </vxe-column>-->
+          <!--                        <vxe-column field="childUnitCount" sortable title="子单位数" width=""></vxe-column>-->
+          <!--                        <vxe-column field="rate" sortable title="换算率" width=""></vxe-column>-->
+          <!--                        <vxe-column field="isBaseUnit" sortable title="作为基本单位" width="">-->
+          <!--                            <template #default="{ row }">-->
+          <!--                                {{ row.isBaseUnit ? '是' : '否' }}-->
+          <!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
+          <!--                            </template>-->
+          <!--                        </vxe-column>-->
+          <!--                        <vxe-column title="操作" width="200" fixed="right" show-overflow>-->
+          <!--                            <template #default="{ row }">-->
+          <!--                                <vxe-button type="text" @click="editUnit(row)" icon="vxe-icon-edit">修改</vxe-button>-->
+          <!--                                <vxe-button type="text" @click="deleteUnit(row)" icon="vxe-icon-delete" style="color: rgb(223, 65, 65)">删除</vxe-button>-->
+          <!--                                &lt;!&ndash; <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> &ndash;&gt;-->
+          <!--                            </template>-->
+          <!--                        </vxe-column>-->
+          <!--                    </vxe-table>-->
+        </div>
+        <div style="line-height: 35px">
+          <el-pagination
+              v-model:currentPage="tableParams.page"
+              v-model:page-size="tableParams.pageSize"
+              :total="tableParams.total"
+              :page-sizes="[10, 20, 50, 100, 200, 500]"
+              small=""
+              background=""
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              layout="total, sizes, prev, pager, next, jumper"
+
+          />
+        </div>
+        <!--                <div>-->
+        <!--                    <vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"-->
+        <!--                        :total="pageVO1.total" />-->
+        <!--                </div>-->
+      </div>
+
+    </div>
+    <el-dialog v-model="dialogTableVisible" :title="mTitle" width="860">
+      <el-form :inline="true" :model="unitFrom" class="demo-form-inline" label-width="80px">
+        <el-row>
+
+          <el-col :span="8">
+            <el-form-item label="名称" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
+              <el-input v-model="unitFrom.name" placeholder="请输入名称" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="编码" :rules="[{ required: true, message: '编码不能为空', trigger: 'blur' }]">
+              <el-input v-model="unitFrom.codeNum" placeholder="请输入编码" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="单位组" :rules="[{ required: true, message: '单位组不能为空', trigger: 'blur' }]">
+              <el-select v-model="unitFrom.groupUnitId" placeholder="请选择" clearable>
+                <el-option :label="item.name" :value="item.id" v-for="item, index in data.unitGroup"
+                           :key="index"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="精度">
+              <el-input v-model="unitFrom.accuracy" placeholder="请输入" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="子单位数" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+              <el-input v-model="unitFrom.childUnitCount" placeholder="下级单位数量" clearable/>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="换算率" :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]">
+              <el-input v-model="unitFrom.rate" placeholder="基本单位数量" clearable/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="代码">
+              <el-input v-model="unitFrom.code" placeholder="请输入" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="外部编码">
+              <el-input v-model="unitFrom.externalNumber" placeholder="请输入" clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="备注">
+              <el-input v-model="unitFrom.remarks" placeholder="请输入" clearable/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="基本单位">
+              <el-switch v-model="unitFrom.isBaseUnit" inline-prompt active-text="是" inactive-text="否"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否启用">
+              <el-switch v-model="unitFrom.isEnable" inline-prompt active-text="启用" inactive-text="禁用"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+      <el-row style="display: flex; justify-content: space-around;">
+        <el-button style="width: 100px;" type="primary" @click="unitSubmit">提交</el-button>
+        <el-button style="width: 100px;" @click="dialogTableVisible = false">取消</el-button>
+      </el-row>
+    </el-dialog>
+    <div v-if="isShowDialog">
+      <el-dialog v-model="isShowDialog" :title="mGroupTitle" ref="ruleFormRef" :width="800">
+        <template #header>
+          <div style="color: #fff">
+            <span>单位组</span>
+          </div>
+        </template>
+        <el-form :model="unitGroupModel" label-width="auto" :rules="rules">
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="unitGroupModel.name" placeholder="请输入名称" maxlength="32" show-word-limit
+                        clearable/>
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-form-item label="是否启用" prop="isEnable">
+              <el-switch v-model="unitGroupModel.isEnable" active-text="是" inactive-text="否"/>
+            </el-form-item>
+          </el-col>
+        </el-form>
+        <template #footer>
 				<span class="dialog-footer">
 					<el-button @click="cancel">取 消</el-button>
 					<el-button type="primary" @click="submit">确 定</el-button>
 				</span>
-			</template>
-		</el-dialog>
-        
-
+        </template>
+      </el-dialog>
     </div>
+
+  </div>
 </template>
 
 <script setup lang="ts" name="sysUnit">
-import { onMounted, reactive, ref } from 'vue'
-import { getAPI } from '/@/utils/axios-utils';
-import { SysUnitApi, SysUnitGroupApi } from '/@/api-services/api';
-import { AddSysUnitInput, SqlSugarPagedListSysUnitOutput, SysUnitGroupOutput, SysUnitInput} from '/@/api-services/models';
-import type { FormRules } from "element-plus";
-import { ElMessageBox, ElMessage } from 'element-plus';
+import {onMounted, reactive, ref} from 'vue'
+import {getAPI} from '/@/utils/axios-utils';
+import {SysUnitApi, SysUnitGroupApi} from '/@/api-services/api';
+import {
+  AddSysUnitInput,
+  SqlSugarPagedListSysUnitOutput,
+  SysUnitGroupOutput,
+  SysUnitInput
+} from '/@/api-services/models';
+import type {FormRules} from "element-plus";
+import {ElMessageBox, ElMessage} from 'element-plus';
 import {auth} from "/@/utils/authFunction";
 
 let data = reactive({
-    unit: [] as SqlSugarPagedListSysUnitOutput[],//单位数据
-    unitGroup: [] as SysUnitGroupOutput[],//单位组数据
-    selectUnitGroupId:0,
+  unit: [] as SqlSugarPagedListSysUnitOutput[],//单位数据
+  unitGroup: [] as SysUnitGroupOutput[],//单位组数据
+  selectUnitGroupId: 0,
 });
 const loading = ref(false);
 const ruleFormRef = ref();
-const isShowDialog=ref(false);
+const isShowDialog = ref(false);
 const tableParams = ref({
   page: 1,
   pageSize: 10,
   total: 0,
 });
-let unitGroupModel=reactive<any>({isEnable:true,isDelete:false});
-	//自行添加其他规则
-	const rules = ref<FormRules>({
-		name: [{required: true, message: '请输入名称', trigger: 'blur',},],
-	});
+let unitGroupModel = reactive<any>({isEnable: true, isDelete: false});
+//自行添加其他规则
+const rules = ref<FormRules>({
+  name: [{required: true, message: '请输入名称', trigger: 'blur',},],
+});
 
-    let mTitle = ref('新增');
+let mTitle = ref('新增');
 let mGroupTitle = ref('新增');
 let dialogTableVisible = ref(false);
 
 
+const unitFrom = ref<any>({isEnable: true, isDelete: false, name: '', codeNum: ''})
 
-const unitFrom = ref<any>({isEnable:true,isDelete:false,name:'',codeNum:''})
+const cancel = () => {
+  isShowDialog.value = false
+}
 
-    const  cancel=()=>{
-		isShowDialog.value=false
-	}
+//定义submit方法，新增单位组
+const submit = async () => {
+  if (mGroupTitle.value == '新增') {
+    let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupAddPost(unitGroupModel);
+    console.log(res)
+    if (res.data.code === 200) {
+      isShowDialog.value = false;
+      unitGroup();
+    }
+  } else {
+    let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupUpdatePost(unitGroupModel);
+    if (res.data.code === 200) {
+      isShowDialog.value = false;
+      unitGroup();
+    }
+  }
 
-    //定义submit方法，新增单位组
-    const submit = async () => {
-        if(mGroupTitle.value=='新增'){
-            let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupAddPost(unitGroupModel);
-                console.log(res)
-				if (res.data.code===200) {
-					isShowDialog.value = false;
-					unitGroup();
-				}
-        }else{
-            let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupUpdatePost(unitGroupModel);
-            if (res.data.code===200) {
-                isShowDialog.value = false;
-                unitGroup();
-            }
-        }
-        
-	};
+};
 
 //获取单位组数据
 const unitGroup = async () => {
-    let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupListGet();
-    data.unitGroup = res.data.result || [];
+  let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupListGet();
+  data.unitGroup = res.data.result || [];
 }
 
 //单选
-const radioChangeEvent = ({ row }) => {
-    data.selectUnitGroupId = row.id;
-    unitPage({groupUnitId:row.id})
+const radioChangeEvent = ({row}) => {
+  data.selectUnitGroupId = row.id;
+  unitPage({groupUnitId: row.id})
 }
 const formInline = reactive({} as SysUnitInput)
 
 //获取单位数据
 const unitPage = async (parameter = formInline) => {
-    let res = await getAPI(SysUnitApi).apiSysUnitPagePost({pageSize:tableParams.value.pageSize,page:tableParams.value.page, ...parameter,...formInline });
-    data.unit = res.data.result?.items as any;
-    tableParams.value.total = res.data.result?.total;
+  let res = await getAPI(SysUnitApi).apiSysUnitPagePost({
+    pageSize: tableParams.value.pageSize,
+    page: tableParams.value.page, ...parameter, ...formInline
+  });
+  data.unit = res.data.result?.items as any;
+  tableParams.value.total = res.data.result?.total;
 }
 
 // 改变页面容量
 const handleSizeChange = (val: number) => {
   tableParams.value.pageSize = val;
-  unitPage({groupUnitId:data.selectUnitGroupId});
+  unitPage({groupUnitId: data.selectUnitGroupId});
 };
 
 // 改变页码序号
 const handleCurrentChange = (val: number) => {
   tableParams.value.page = val;
-  unitPage({groupUnitId:data.selectUnitGroupId});
+  unitPage({groupUnitId: data.selectUnitGroupId});
 };
 
 
-const addUnit= ()=>{
-  unitFrom.value.codeNum = 'DW'+ getCurrentDate();
-  dialogTableVisible.value=true;
-  mTitle.value='新增'
+const addUnit = () => {
+  unitFrom.value.codeNum = 'DW' + getCurrentDate();
+  dialogTableVisible.value = true;
+  mTitle.value = '新增'
 }
 
 //提交
 const unitSubmit = async () => {
   //校验基本单位是否唯一
   let checkRes = await getAPI(SysUnitApi).apiSysUnitCheckPost(unitFrom.value);
-  if(checkRes.data.code === 200){
+  if (checkRes.data.code === 200) {
     const item = checkRes.data.result;
-    if(mTitle.value=='新增'){
-      if(unitFrom.value.isBaseUnit && item!=null){
-         ElMessage({ message: '基本单位必须唯一', type: 'error', });
-         unitFrom.value.isBaseUnit = false;
-         return;
+    if (mTitle.value == '新增') {
+      if (unitFrom.value.isBaseUnit && item != null) {
+        ElMessage({message: '基本单位必须唯一', type: 'error',});
+        unitFrom.value.isBaseUnit = false;
+        return;
       }
       let res = await getAPI(SysUnitApi).apiSysUnitAddPost(unitFrom.value);
-      if (res.data.code===200) {
+      if (res.data.code === 200) {
         dialogTableVisible.value = false;
-        unitPage({groupUnitId:data.selectUnitGroupId});
+        unitPage({groupUnitId: data.selectUnitGroupId});
       }
-    }else{
-      if(unitFrom.value.isBaseUnit && item!=null && item.id!=unitFrom.value.id)
-      {
-         ElMessage({ message: '基本单位必须唯一', type: 'error', });
-         unitFrom.value.isBaseUnit = false;
-         return;
+    } else {
+      if (unitFrom.value.isBaseUnit && item != null && item.id != unitFrom.value.id) {
+        ElMessage({message: '基本单位必须唯一', type: 'error',});
+        unitFrom.value.isBaseUnit = false;
+        return;
       }
       let res = await getAPI(SysUnitApi).apiSysUnitUpdatePost(unitFrom.value);
-      if (res.data.code===200) {
+      if (res.data.code === 200) {
         dialogTableVisible.value = false;
-        unitPage({groupUnitId:data.selectUnitGroupId});
+        unitPage({groupUnitId: data.selectUnitGroupId});
       }
     }
   }
@@ -399,47 +413,48 @@ const getCurrentDate = () => {
   return `${year}${month}${day}${hours}${minutes}${seconds}`;
 }
 
-const editUnit=async(row:any)=>{
-    unitFrom.value=row;
-    mTitle.value='编辑'
-    dialogTableVisible.value=true;
+const editUnit = async (row: any) => {
+  unitFrom.value = reactive({ ...row });
+  mTitle.value = '编辑'
+  dialogTableVisible.value = true;
 }
 
-const deleteUnit=async(row:any)=>{
-                ElMessageBox.confirm(`确定删除?`, '提示', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning',
-	})
-		.then(async () => {
-            let res = await getAPI(SysUnitApi).apiSysUnitDeletePost(row);
-          if (res.data.code == 200) {
-             ElMessage({ message: '成功', type: 'success', })
-             unitPage({groupUnitId:data.selectUnitGroupId});
-             //state.tableData.handleList();
-          } else
-            ElMessage.error(res.data.message!)
-		})
-		.catch(() => {});
+const deleteUnit = async (row: any) => {
+  ElMessageBox.confirm(`确定删除?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+      .then(async () => {
+        let res = await getAPI(SysUnitApi).apiSysUnitDeletePost(row);
+        if (res.data.code == 200) {
+          ElMessage({message: '成功', type: 'success',})
+          unitPage({groupUnitId: data.selectUnitGroupId});
+          //state.tableData.handleList();
+        } else
+          ElMessage.error(res.data.message!)
+      })
+      .catch(() => {
+      });
 }
 
-const addUnitGroup=()=>{
+const addUnitGroup = () => {
 
-    isShowDialog.value=true
+  isShowDialog.value = true
 }
 
 
-const editUnitGroup=async(row:any)=>{
-    unitGroupModel=row;
-    mGroupTitle.value='编辑'
-    isShowDialog.value=true;
+const editUnitGroup = (row: any) => {
+  mGroupTitle.value = '编辑'
+  isShowDialog.value = true;
+  unitGroupModel = reactive({ ...row });
 }
 
-const deleteUnitGroup=async(row:any)=>{
-  let checkRes = await getAPI(SysUnitGroupApi).apiSysUnitGroupCheckPost({Id:row.id});
-  if(checkRes.data.code == 200){
+const deleteUnitGroup = async (row: any) => {
+  let checkRes = await getAPI(SysUnitGroupApi).apiSysUnitGroupCheckPost({Id: row.id});
+  if (checkRes.data.code == 200) {
     const result = checkRes.data.result;
-    if(result){
+    if (result) {
       return ElMessage.error("存在单位数据,不允许删除")
     }
     ElMessageBox.confirm(`确定删除?`, '提示', {
@@ -451,82 +466,83 @@ const deleteUnitGroup=async(row:any)=>{
           console.log(row)
           let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupDeletePost(row);
           if (res.data.code == 200) {
-            ElMessage({ message: '成功', type: 'success', })
+            ElMessage({message: '成功', type: 'success',})
             unitGroup()
-            unitPage({groupUnitId:data.selectUnitGroupId})
+            unitPage({groupUnitId: data.selectUnitGroupId})
             //state.tableData.handleList();
           } else
             ElMessage.error(res.data.message!)
         })
-        .catch(() => {});
+        .catch(() => {
+        });
   }
 
 }
 
 const pageVO1 = reactive({
-    currentPage: 1,
-    pageSize: 10,
-    total: 0
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
 })
 
 onMounted(() => {
-    unitGroup()
-    unitPage({groupUnitId:data.selectUnitGroupId})
+  unitGroup()
+  unitPage({groupUnitId: data.selectUnitGroupId})
 })
 </script>
 
 <style lang="scss" scoped>
 .main {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+
+  .main-from {
+    // height: 300px;
+    width: 100%;
+    padding: 20px 10px;
+
+    .el-row {
+      width: 100%;
+    }
+  }
+
+  .main-table {
+    margin-top: 20px;
+    box-sizing: border-box;
     padding: 10px;
+    flex-grow: 1;
+    height: 0;
+
     display: flex;
-    flex-direction: column;
 
-    .main-from {
-        // height: 300px;
-        width: 100%;
-        padding: 20px 10px;
+    // flex-direction: column;
+    .tab-left {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      margin-right: 20px;
+      // div:nth-child(1) {
+      //     width: 50%;
+      // }
 
-        .el-row {
-            width: 100%;
-        }
+      // div:nth-child(2) {
+      //     width: 50%;
+      // }
     }
 
-    .main-table {
-        margin-top: 20px;
-        box-sizing: border-box;
-        padding: 10px;
-        flex-grow: 1;
-        height: 0;
+    .tab {
+      width: 80%;
+      flex: 1;
+      overflow: scroll;
+      display: flex;
+      flex-direction: column;
 
-        display: flex;
-
-        // flex-direction: column;
-        .tab-left {
-            width: 25%;
-            display: flex;
-            flex-direction: column;
-            margin-right: 20px;
-            // div:nth-child(1) {
-            //     width: 50%;
-            // }
-
-            // div:nth-child(2) {
-            //     width: 50%;
-            // }
-        }
-
-        .tab {
-            width: 80%;
-            flex: 1;
-            overflow: scroll;
-            display: flex;
-            flex-direction: column;
-
-            div:nth-child(1) {
-                flex: 1;
-                overflow: scroll;
-            }
-        }
+      div:nth-child(1) {
+        flex: 1;
+        overflow: scroll;
+      }
     }
+  }
 }
 </style>