物料基础分类-根据UI进行页面布局优化

src/views/material/classify/index.vue

@@ -1,123 +1,150 @@
 <template>
-  <div class="classify">
+  <el-card
+    v-loading="loading"
+    :body-style="{
+      height: '100%',
+      padding: 0,
+      display: 'flex',
+      'flex-direction': 'column',
+    }"
+  >
+    <el-row :gutter="20">
+      <el-col :span="6" style="border-right: 1px solid #e9e9e9">
+        <el-input
+          placeholder="输入关键字/编码进行过滤"
+          :size="size"
+          v-model="filterText"
+          style="margin-bottom: 10px"
+        >
+        </el-input>
 
-    <el-card v-loading="loading">
+        <el-tree
+          class="filter-tree"
+          :data="data"
+          :props="defaultProps"
+          node-key="id"
+          @node-click="clickTree"
+          highlight-current
+          :default-expanded-keys="defaultExpanded"
+          :filter-node-method="filterNode"
+          ref="tree"
+        >
+          <span slot-scope="{ node, data }">
+            {{ data.code }}{{ data.materialType }}
+          </span>
+        </el-tree>
+      </el-col>
 
-      <el-row :gutter="10" class="mb10" style="position: fixed;top: 20px; right: 50px;z-index: 999;">
-        <div>
-          <el-button type="primary" size="mini" @click="mbDownload">模板下载</el-button>
-          <el-button type="primary" size="mini" @click="importMb">导入</el-button>
-          <el-button type="primary" size="mini" plain @click="addClassify">新增</el-button>
-          <el-button type="primary" size="mini" plain @click="editClassify">修改</el-button>
-          <el-button type="primary" size="mini" plain @click="refreshData">{{refreshName ? '全部分类': '过滤停用'}}</el-button>
-          <!-- <el-button type="primary" size="mini" plain @click="deleteClassify">删除</el-button> -->
-        </div>
-      </el-row>
-
-      <el-row :gutter="10" class="content">
-        <el-col :span="6">
-          <el-input
-            placeholder="输入关键字/编码进行过滤"
-            size="mini"
-            v-model="filterText"
-          >
-          </el-input>
-
-          <el-tree
-            class="filter-tree"
-            :data="data"
-            :props="defaultProps"
-            node-key="id"
-            @node-click="clickTree"
-            highlight-current
-            :default-expanded-keys="defaultExpanded"
-            :filter-node-method="filterNode"
-            ref="tree"
-          >
-            <span slot-scope="{ node, data }">
-              {{ data.code }}{{ data.materialType }}
-            </span>
-          </el-tree>
-        </el-col>
+      <el-col :span="18" style="padding: 0 20px">
+        <el-row
+          style="
+            display: flex;
+            justify-content: space-between;
+            margin: 0 0 30px;
+          "
+        >
+          <el-col style="font-size: 18px; font-weight: 600">详细信息</el-col>
+          <el-col style="text-align: right">
+            <el-button type="primary" :size="size" @click="mbDownload"
+              >模板下载</el-button
+            >
+            <el-button type="primary" :size="size" @click="importMb"
+              >导入</el-button
+            >
+            <el-button type="primary" :size="size" @click="addClassify"
+              >新增</el-button
+            >
+            <el-button :size="size" @click="editClassify">修改</el-button>
+            <el-button :size="size" @click="refreshData">{{
+              refreshName ? "全部分类" : "过滤停用"
+            }}</el-button>
+          </el-col>
+        </el-row>
 
-        <el-col :span="16" style="position: fixed;top: 40px; right: 40px;z-index: 999;">
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="140px"
+          class="demo-ruleForm"
+        >
           <span class="title">基本信息</span>
-          <el-form
-            :model="ruleForm"
-            :rules="rules"
-            ref="ruleForm"
-            label-width="140px"
-            class="demo-ruleForm"
-          >
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="物料基本分类编码" prop="code">
-                  <el-input
-                    :disabled="disable"
-                    v-model="ruleForm.code"
-                    size="mini"
-                  ></el-input>
-                  <span>编码规则x-xxx-xxx-xxx</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="物料基本分类名称" prop="materialType">
-                  <el-input
-                    :disabled="disable"
-                    v-model="ruleForm.materialType"
-                    size="mini"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="启用状态" prop="isEnable">
-                  <el-select
-                    v-model="ruleForm.isEnable"
-                    placeholder="启用状态"
-                    size="mini"
-                    :disabled="disable"
-                    style="width: 230px"
-                  >
-                    <el-option
-                      v-for="dict in dict.type.material_enable"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="产品线" prop="productLine" v-if="isFlag">
-                  <treeselect v-model="ruleForm.productLine" :multiple="false" :options="productOptions" :append-to-body="true" placeholder="请选择产品线" :disabled="disable" />
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <span class="title">辅助属性</span>
-            <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="辅助属性结构" prop="marasstframe">
-                  <el-select
-                    v-model="ruleForm.marasstframe"
-                    placeholder="属性结构"
-                    clearable
-                    :disabled="disable"
-                    size="mini"
-                    style="width: 230px"
-                  >
-                    <el-option
-                      v-for="dict in dict.type.sys_assist_condtion"
-                      :key="dict.value"
-                      :label="dict.label"
-                      :value="dict.value"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <!-- <el-row :gutter="20">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="物料基本分类编码" prop="code">
+                <el-input
+                  :disabled="disable"
+                  v-model="ruleForm.code"
+                  :size="size"
+                ></el-input>
+                <span>编码规则x-xxx-xxx-xxx</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="物料基本分类名称" prop="materialType">
+                <el-input
+                  :disabled="disable"
+                  v-model="ruleForm.materialType"
+                  :size="size"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="启用状态" prop="isEnable">
+                <el-select
+                  v-model="ruleForm.isEnable"
+                  placeholder="启用状态"
+                  :size="size"
+                  :disabled="disable"
+                  style="width: 230px"
+                >
+                  <el-option
+                    v-for="dict in dict.type.material_enable"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="产品线" prop="productLine" v-if="isFlag">
+                <treeselect
+                  v-model="ruleForm.productLine"
+                  :multiple="false"
+                  :options="productOptions"
+                  :append-to-body="true"
+                  placeholder="请选择产品线"
+                  :disabled="disable"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <span class="title">辅助属性</span>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="辅助属性结构" prop="marasstframe">
+                <el-select
+                  v-model="ruleForm.marasstframe"
+                  placeholder="属性结构"
+                  clearable
+                  :disabled="disable"
+                  :size="size"
+                  style="width: 230px"
+                >
+                  <el-option
+                    v-for="dict in dict.type.sys_assist_condtion"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <!-- <el-row :gutter="20">
               <el-col :span="24">
                 <el-form-item label="" prop="name">
                   <el-checkbox
@@ -136,52 +163,55 @@
               </el-col>
             </el-row> -->
 
-            <el-row :gutter="20">
-              <el-col :span="24">
-                <el-form-item v-if="!disable">
-                  <el-button size="mini" type="primary" @click="submitForm('ruleForm')"
-                    >保存</el-button
-                  >
-                  <el-button size="mini" @click="resetForm('ruleForm')">取消</el-button>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-col>
-      </el-row>
-    </el-card>
-
+          <el-row v-if="!disable" style="margin-left: 40px">
+            <el-button
+              :size="size"
+              type="primary"
+              @click="submitForm('ruleForm')"
+              >保存</el-button
+            >
+            <el-button :size="size" @click="resetForm('ruleForm')"
+              >取消</el-button
+            >
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
     <!-- 导入对话框 -->
     <el-dialog title="数据导入" :visible.sync="upload.open" width="400px">
       <el-upload
-      ref="upload"
-      :limit="1"
-      accept=".xlsx, .xls"
-      :headers="upload.headers"
-      :action="upload.url + '?updateSupport=' + upload.updateSupport"
-      :disabled="upload.isUploading"
-      :on-progress="handleFileUploadProgress"
-      :on-success="handleFileSuccess"
-      :on-error="errorFile"
-      :auto-upload="false"
-      drag
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport"
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :on-error="errorFile"
+        :auto-upload="false"
+        drag
       >
-      <i class="el-icon-upload"></i>
-      <div class="el-upload__text">
-        将文件拖到此处，或
-        <em>点击上传</em>
-      </div>
-      <!-- <div class="el-upload__tip" slot="tip">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <!-- <div class="el-upload__tip" slot="tip">
         <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
       </div> -->
-      <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+        <div class="el-upload__tip" style="color: red" slot="tip">
+          提示：仅允许导入“xls”或“xlsx”格式文件！
+        </div>
       </el-upload>
       <div slot="footer">
-      <el-button size="mini" type="primary" @click="submitFile">确 定</el-button>
-      <el-button size="mini" @click="upload.open = false">取 消</el-button>
+        <el-button :size="size" type="primary" @click="submitFile"
+          >确 定</el-button
+        >
+        <el-button :size="size" @click="upload.open = false">取 消</el-button>
       </div>
     </el-dialog>
-  </div>
+  </el-card>
 </template>
 
 <script>
@@ -196,14 +226,15 @@ import {
   downLoadClassify,
   getProductLineList,
 } from "@/api/classify/basic";
-import Treeselect from '@riophae/vue-treeselect';
-import '@riophae/vue-treeselect/dist/vue-treeselect.css';
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   components: { Treeselect },
   name: "classify",
   dicts: ["material_enable", "sys_assist_condtion"],
   data() {
     return {
+      size: "mini",
       // 导入参数
       upload: {
         // 是否显示弹出层（导入）
@@ -217,7 +248,7 @@ export default {
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/system/classify/import"
+        url: process.env.VUE_APP_BASE_API + "/system/classify/import",
       },
       loading: false,
       filterText: "",
@@ -249,7 +280,14 @@ export default {
             message: "请输入物料基本分类名称",
             trigger: "blur",
           },
-        ]
+        ],
+        productLine: [
+          {
+            required: true,
+            message: "请输入产品线",
+            trigger: "blur",
+          },
+        ],
       },
       checkList: [],
       disable: true,
@@ -268,8 +306,50 @@ export default {
       //   componentsName: '', //组件名称
       //   componentsCode: '', //组件编码
       // },
-      // 产品线参照
-      productOptions: [],
+      productOptions: [
+        {
+          id: 1,
+          label: "介入产品线",
+        },
+        {
+          id: 2,
+          label: "骨科产品线",
+        },
+        {
+          id: 3,
+          label: "检验产品线",
+        },
+        {
+          id: 4,
+          label: "综合耗材产品线",
+          children: [
+            {
+              id: 5,
+              label: "消毒管控",
+            },
+            {
+              id: 6,
+              label: "血统",
+            },
+            {
+              id: 7,
+              label: "麻醉",
+            },
+            {
+              id: 8,
+              label: "护理",
+            },
+            {
+              id: 9,
+              label: "外科",
+            },
+          ],
+        },
+        {
+          id: 10,
+          label: "设备产品线",
+        },
+      ],
     };
   },
   watch: {
@@ -286,7 +366,8 @@ export default {
     // 获取树形结构
     getTreeData(isEnable) {
       this.loading = true;
-      getTree({}).then((res) => {
+      getTree({})
+        .then((res) => {
           let { code, rows } = res;
           if (code === 200) {
             this.data = rows;
@@ -315,7 +396,10 @@ export default {
     },
     filterNode(value, data) {
       if (!value) return true;
-      return data.materialType.indexOf(value) !== -1 || data.code.indexOf(value) !== -1;
+      return (
+        data.materialType.indexOf(value) !== -1 ||
+        data.code.indexOf(value) !== -1
+      );
     },
     clickTree(data, node) {
       console.log("data", data, node);
@@ -454,50 +538,54 @@ export default {
     },
     // 启用停用
     refreshData() {
-      if(this.refreshName == false) {
-        this.refreshName = true
+      if (this.refreshName == false) {
+        this.refreshName = true;
         this.loading = true;
-        getTree({isEnable: '0'}).then((res) => {
-          let { code, rows } = res;
-          if (code === 200) {
-            this.data = rows;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+        getTree({ isEnable: "0" })
+          .then((res) => {
+            let { code, rows } = res;
+            if (code === 200) {
+              this.data = rows;
+            }
+          })
+          .finally(() => {
+            this.loading = false;
+          });
       } else {
-        this.refreshName = false
+        this.refreshName = false;
         this.getTreeData();
       }
     },
     // 模板下载
     mbDownload() {
       this.$modal.loading("正在下载模板，请稍后...");
-      downLoadClassify({}).then(res => {
-        this.$modal.closeLoading();
-        const blob = new Blob([res], {
-          type: "application/vnd.ms-excel;charset=UTF-8",
-        });// 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
-        const downloadElement = document.createElement("a"); //创建a标签
-        const href = window.URL.createObjectURL(blob); // 创建下载的链接
-        // var temp = res.headers["content-disposition"]; 
-        // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
-        // var name = fileName.split(";")[0]; //切割成文件名
-        downloadElement.href = href;  //下载地址
-        downloadElement.download = '物料基本分类模板'+ this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
-        document.body.appendChild(downloadElement);
-        downloadElement.click(); // 点击下载
-        document.body.removeChild(downloadElement); // 下载完成移除元素
-        window.URL.revokeObjectURL(href); // 释放blob对象
-        this.download.open = false
-      }).catch(err => {
-        this.$modal.closeLoading();
-      })
+      downLoadClassify({})
+        .then((res) => {
+          this.$modal.closeLoading();
+          const blob = new Blob([res], {
+            type: "application/vnd.ms-excel;charset=UTF-8",
+          }); // 创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
+          const downloadElement = document.createElement("a"); //创建a标签
+          const href = window.URL.createObjectURL(blob); // 创建下载的链接
+          // var temp = res.headers["content-disposition"];
+          // var fileName = decodeURIComponent(temp.split("filename=")[1]); // 中文需要转码 (前端乱码）
+          // var name = fileName.split(";")[0]; //切割成文件名
+          downloadElement.href = href; //下载地址
+          downloadElement.download =
+            "物料基本分类模板" + this.parseTime(new Date().getTime()) + ".xlsx"; // 下载后文件名
+          document.body.appendChild(downloadElement);
+          downloadElement.click(); // 点击下载
+          document.body.removeChild(downloadElement); // 下载完成移除元素
+          window.URL.revokeObjectURL(href); // 释放blob对象
+          this.download.open = false;
+        })
+        .catch((err) => {
+          this.$modal.closeLoading();
+        });
     },
     // 文件导入
     importMb() {
-      this.upload.open = true
+      this.upload.open = true;
     },
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
@@ -536,17 +624,19 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.classify {
-  height: calc(100vh - 84px);
-  padding: 12px;
-  box-sizing: border-box;
-  overflow-y: auto;
+.el-card {
+  width: calc(100% - 32px);
+  height: calc(100vh - 32px);
+  margin: 16px;
+  padding: 16px;
+  border-radius: 8px;
 }
 .title {
   font-weight: bold;
 }
-.mb10 {
-  display: flex;
-  flex-direction: row-reverse;
+.filter-tree {
+  height: calc(100vh - 102px);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 </style>