Merge branch 'master' of http://192.168.218.113:9001/r/lims-before

Fixiaobai

2023-09-07 efcf450e8e7e375ef4ffe9f421ec0d34c5378180

 src/views/basicData/index.vue

@@ -1,493 +1,457 @@
<template>
  <div class="main_div">
    <div class="top_div">
      <span>样品名称：</span>
      <el-select
        v-model="params.material"
        size="small"
        placeholder="请选择样品名称"
      >
        <el-option
          v-for="item in productModelSelectmater"
          :value="item"
          :key="item.index"
          :label="item"
        ></el-option>
      </el-select>
      <span class="top_div_span">项目分组：</span>
      <el-input
        v-model="params.father"
        placeholder="请输入项目分组"
        style="width: 10%"
        size="small "
      ></el-input>
      <span class="top_div_span">项目名称：</span>
      <el-input
        v-model="params.name"
        placeholder="请输入项目名称"
        style="width: 10%"
        size="small "
      ></el-input>
      <el-button
        type="primary"
        class="top_div_button"
        size="small"
        @click="selectProductModelTable"
        >查询</el-button
      >
      <el-button class="top_div_button" size="small" @click="params = {}"
        >重置</el-button
      >
      <div style="float: right">
        <el-button
          class="top_div_button"
          type="primary"
          size="small"
          icon="el-icon-folder-add"
          @click="centerDialogVisible = true"
          >新增</el-button
        >
        <el-dialog
          :visible.sync="centerDialogVisible"
          width="30%"
          right
          :before-close="handleClose"
          :title="isUpdate ? '更新' : '新增'"
        >
          <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
            <el-form-item prop="material" required>
              <span>样品名称：</span>
              <el-select
                v-model="form.material"
                style="width: 85%"
                placeholder="请选择样品名称"
              >
                <el-option
                  v-for="(item, index) in productModelSelectmater"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span>项目分组：</span>
              <el-select
                v-model="form.father"
                style="width: 85%"
                placeholder="请选择项目分组"
              >
                <el-option
                  v-for="(item, index) in projectGroupingOptions"
                  :key="index"
                  :value="item"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-row :gutter="24">
              <el-col :span="12"
                ><el-form-item prop="name" required
                  ><span>项目名称：</span>
                  <el-input
                    style="width: 70%"
                    v-model="form.name"
                    placeholder="请输入项目名称"
                  ></el-input></el-form-item
              ></el-col>
              <el-col :span="12">
                <el-form-item prop="unit">
                  <span
                    v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"
                  ></span>
                  <el-input
                    style="width: 70%"
                    v-model="form.unit"
                    placeholder="请输入单位"
                  ></el-input></el-form-item
              ></el-col>
            </el-row>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false" size="small "
              >取 消</el-button
            >
            <el-button type="primary" @click="submitAdd" size="small ">{{
              isUpdate ? "更 新" : "保 存"
            }}</el-button>
          </span>
        </el-dialog>
        <el-button
          class="top_div_button"
          icon="el-icon-delete-solid"
          size="small"
          style="color: #00a5ff"
          @click="deleteListClick"
          >删除</el-button
        >
      </div>
    </div>
    <div class="table_div">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        height="calc(100vh - 250px)"
        default-expand-all
        ref="multipleTable"
        @select="selectTr"
        @select-all="selectAll"
        @selection-change="handleSelectionChange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column type="selection" label="序号"> </el-table-column>
        <el-table-column
          type="index"
          width="50px"
          label="序号"
        ></el-table-column>
        <el-table-column label="项目名称" sortable>
          <template scope="scope">
            <el-tag
              ><div
                class="firstDiv"
                :style="`color: ${
   <div class="main_div">
      <div class="top_div">
         <el-form :inline="true" :model="params" label-position="left">
            <el-form-item prop="material" label="样品名称：">
               <el-select v-model="params.material" size="small" placeholder="请选择样品名称" @change="selectProductModelTable()">
                  <el-option v-for="item in productModelSelectmater" :value="item" :key="item.index" :label="item"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item prop="father" label="项目分组：" width="200">
               <el-input size="small" v-model="params.father" placeholder="请输入项目分组"></el-input>
            </el-form-item>
            <el-form-item prop="name" label="项目名称：" width="200" >
               <el-input size="small" v-model="params.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="">
               <el-button type="primary" class="top_div_button" size="small" @click="selectProductModelTable">查询</el-button>
               <el-button class="top_div_button" size="small" @click="clean">重置</el-button>
            </el-form-item>
            <el-form-item style="margin-left: 25%;">
               <el-button class="top_div_button" type="primary" size="small" icon="el-icon-plus"
                  @click="centerDialogVisible = true">新增</el-button>
               <el-button class="top_div_button" icon="el-icon-delete-solid" size="small" style="color: #00a5ff"
                  @click="deleteListClick">删除</el-button>
            </el-form-item>
         </el-form>
         <el-dialog :visible.sync="centerDialogVisible" width="30%" right :before-close="handleClose"
            :title="isUpdate ? '更新' : '新增'" :hide-required-asterisk="false">
            <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
               <el-form-item prop="material" required>
                  <span>样品名称：</span>
                  <el-autocomplete class="inline-input" v-model="form.material" :fetch-suggestions="querySearch1"
                     placeholder="请输入样品名称" style="width: calc(100% - 70px);"></el-autocomplete>
               </el-form-item>
               <el-form-item>
                  <span>项目分组：</span>
                  <el-autocomplete class="inline-input" v-model="form.father" :fetch-suggestions="querySearch2"
                     placeholder="请输入项目分组" style="width: calc(100% - 70px);"></el-autocomplete>
               </el-form-item>
               <el-row :gutter="24">
                  <el-col :span="12"><el-form-item prop="name" required><span>项目名称：</span>
                        <el-input style="width: calc(100% - 70px);" v-model="form.name"
                           placeholder="请输入项目名称"></el-input></el-form-item></el-col>
                  <el-col :span="12">
                     <el-form-item prop="unit">
                        <span v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"></span>
                        <el-input style="width: calc(100% - 70px);" v-model="form.unit"
                           placeholder="请输入单位"></el-input></el-form-item></el-col>
               </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
               <el-button @click="centerDialogVisible = false" size="small ">取 消</el-button>
               <el-button type="primary" @click="submitAdd" size="small ">{{
         isUpdate ? "更 新" : "保 存"
      }}</el-button>
            </span>
         </el-dialog>
      </div>
      <div class="table_div">
         <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
            height="calc(100vh - 250px)" default-expand-all ref="multipleTable" @select="selectTr" @select-all="selectAll"
            @selection-change="handleSelectionChange" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" label="序号"> </el-table-column>
            <el-table-column type="index" width="50px" label="序号"></el-table-column>
            <el-table-column label="项目名称" sortable>
               <template scope="scope">
                  <el-tag>
                     <div class="firstDiv" :style="`color: ${
                  scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
                }`"
              >
                {{ scope.row.code == "[1]" ? "01" : "02" }}
              </div>
              <span style="color: black">{{ scope.row.name }}</span></el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.code == '[2]' || scope.row.edit == true">
              <el-button type="text" size="mini" @click="childrenClick(scope)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="deleteTreeChildren(scope)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
                }`">
                        {{ scope.row.code == "[1]" ? "01" : "02" }}
                     </div>
                     <span style="color: black">{{ scope.row.name }}</span>
                  </el-tag>
               </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" sortable></el-table-column>
            <el-table-column label="操作">
               <template slot-scope="scope">
                  <div v-if="scope.row.code == '[2]' || scope.row.edit == true">
                     <el-button type="text" size="mini" @click="childrenClick(scope)">编辑</el-button>
                     <el-button type="text" size="mini" @click="deleteTreeChildren(scope)">删除</el-button>
                  </div>
               </template>
            </el-table-column>
         </el-table>
      </div>
   </div>
</template>

<script>
import {
  addStandardProjectGroupApi,
  productModelSelectmaterApi,
  addproductModelApi,
  selectproductModelApi,
  deleteProductModelApi,
  selectproductModelByIdApi,
  updateProductModelApi,
  deleteListApi,
} from "@/api/basicData/index";
export default {
  name: "BasicDataMessage",
  data() {
    return {
      isAllSelect: false,
      projectGroupingOptions: [],
      productModelSelectmater: [],
      value: "",
      isUpdate: false,
      projectName: "",
      tableData: [],
      centerDialogVisible: false,
      deleteList: [],
      form: {
        material: "", // 样品名称
        father: "", // 项目分组
        name: "", // 项目名称
        unit: "", // 单位
      },
      params: {
        material: "",
        father: "",
        name: "",
      },
      rules: {
        material: [
          { required: true, message: "请选择样品名称", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        unit: [
          { required: true, message: "请输入单位", trigger: "blur" },
          {
            min: 1,
            max: 25,
            message: "长度在 1 到 25 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitAdd() {
      if (!this.isUpdate) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            addproductModelApi(this.form).then((res) => {
              this.centerDialogVisible = false;
              this.$message({
                message: res.message,
                type: "success",
              });
              this.selectProductModelTable();
            });
          }
        });
      } else {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            updateProductModelApi(this.form).then((res) => {
              this.centerDialogVisible = false;
              this.$message({
                message: res.message,
                type: "success",
              });
              this.selectProductModelTable();
            });
          }
        });
      }
    },
    async selectProductMaster() {
      await productModelSelectmaterApi().then((res) => {
        this.productModelSelectmater = res.data;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.centerDialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    selectProductModelTable() {
      selectproductModelApi(this.params).then((res) => {
        res.data.forEach((i) => {
          if (i.name === undefined) {
            i.name = i.children[0].name;
            i.unit = i.children[0].unit;
            i.id = i.children[0].id;
            i.edit = true;
            delete i.children;
          }
        });
        this.tableData = res.data;
        this.selectDataList();
      });
    },
    childrenClick(scope) {
      this.isUpdate = true;
      let father = "";
      selectproductModelByIdApi(scope.row.id).then((res) => {
        let result = res.data;
        this.form.name = result.name;
        this.form.material = result.material;
        this.form.father = result.father;
        this.form.unit = result.unit;
        this.form.id = scope.row.id;
      });
      this.centerDialogVisible = true;
    },
    selectDataList() {
      this.tableData.forEach((a) => {
        a.code = "[1]";
        if (a.children != undefined) {
          a.children.forEach((b) => {
            b.code = "[2]";
          });
        }
      });
    },
    deleteTreeChildren(scope) {
      deleteProductModelApi(scope.row.id).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },

    // 表格树全部选中配置
    // 全选/取消选操作
    selectAll(val) {
      this.isAllSelect = !this.isAllSelect;
      let data = this.tableData;
      this.toggleSelect(data, this.isAllSelect, "all");
    },
    //选择某行
    selectTr(selection, row) {
      this.$set(row, "isChecked", !row.isChecked);
      this.$nextTick(() => {
        this.isAllSelect = row.isChecked;
        this.toggleSelect(row, row.isChecked, "tr");
      });
    },
    //递归子级
    toggleSelect(data, flag, type) {
      if (type === "all") {
        if (data.length > 0) {
          data.forEach((item) => {
            this.toggleSelection(item, flag);
            if (item.children && item.children.length > 0) {
              this.toggleSelect(item.children, flag, type);
            }
          });
        }
      } else {
        if (data.children && data.children.length > 0) {
          data.children.forEach((item) => {
            item.isChecked = !item.isChecked;
            this.$refs.multipleTable.toggleRowSelection(item, flag);
            this.toggleSelect(item, flag, type);
          });
        }
      }
    },
    //改变选中
    toggleSelection(row, flag) {
      this.$set(row, "isChecked", flag);
      this.$nextTick(() => {
        if (flag) {
          this.$refs.multipleTable.toggleRowSelection(row, flag);
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    handleSelectionChange(val) {
      this.deleteList = [];
      val.forEach((v) => {
        if (v.id !== undefined) {
          this.deleteList.push(v.id);
        }
      });
      console.log(`output->this.deleteList`, this.deleteList);
    },
    // 表格树全部选中配置  结束
    deleteListClick() {
      deleteListApi(this.deleteList).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.selectProductModelTable();
      });
    },
  },
  mounted() {
    this.selectProductMaster().then((res) => {
      this.params.material = this.productModelSelectmater[0];
      this.selectProductModelTable();
    });
  },
  watch: {
    centerDialogVisible: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          addStandardProjectGroupApi().then((res) => {
            this.projectGroupingOptions = res.data;
          });
        } else {
          // 请求成功清除数据
          this.form = {};
          // 提交成功清除检验
          this.$refs.ruleForm.resetFields();
          this.isUpdate = false;
        }
      },
    },
  },
};
   import {
      addStandardProjectGroupApi,
      productModelSelectmaterApi,
      addproductModelApi,
      selectproductModelApi,
      deleteProductModelApi,
      selectproductModelByIdApi,
      updateProductModelApi,
      deleteListApi,
   } from "@/api/basicData/index";
   export default {
      name: "BasicDataMessage",
      data() {
         return {
            isAllSelect: false,
            projectGroupingOptions: [],
            productModelSelectmater: [],
            value: "",
            isUpdate: false,
            projectName: "",
            tableData: [],
            centerDialogVisible: false,
            deleteList: [],
            form: {
               material: "", // 样品名称
               father: "", // 项目分组
               name: "", // 项目名称
               unit: "", // 单位
            },
            params: {
               material: "",
               father: "",
               name: "",
            },
            rules: {
               material: [{
                  required: true,
                  message: "请输入样品名称",
                  trigger: "blur"
               }],
               name: [{
                     required: true,
                     message: "请输入项目名称",
                     trigger: "blur"
                  },
                  {
                     min: 2,
                     max: 25,
                     message: "长度在 2 到 25 个字符",
                     trigger: "blur",
                  },
               ],
               unit: [{
                     required: true,
                     message: "请输入单位",
                     trigger: "blur"
                  },
                  {
                     min: 1,
                     max: 25,
                     message: "长度在 1 到 25 个字符",
                     trigger: "blur",
                  },
               ],
            },
         };
      },
      methods: {
         submitAdd() {
            if (!this.isUpdate) {
               this.$refs.ruleForm.validate((valid) => {
                  if (valid) {
                     addproductModelApi(this.form).then((res) => {
                        this.centerDialogVisible = false;
                        this.$message({
                           message: res.message,
                           type: "success",
                        });
                        this.selectProductMaster();
                        this.selectProductModelTable();
                     });
                  }
               });
            } else {
               this.$refs.ruleForm.validate((valid) => {
                  if (valid) {
                     updateProductModelApi(this.form).then((res) => {
                        this.centerDialogVisible = false;
                        this.$message({
                           message: res.message,
                           type: "success",
                        });
                        this.selectProductModelTable();
                     });
                  }
               });
            }
         },
         async selectProductMaster() {
            await productModelSelectmaterApi().then((res) => {
               this.productModelSelectmater = res.data;
            });
         },
         handleClose(done) {
            this.centerDialogVisible = false;
            done();
         },
         selectProductModelTable() {
            selectproductModelApi(this.params).then((res) => {
               res.data.forEach((i) => {
                  if (i.name === undefined) {
                     i.name = i.children[0].name;
                     i.unit = i.children[0].unit;
                     i.id = i.children[0].id;
                     i.edit = true;
                     delete i.children;
                  }
               });
               this.tableData = res.data;
               this.selectDataList();
            });
         },
         childrenClick(scope) {
            this.isUpdate = true;
            let father = "";
            this.form = {
               material: "", // 样品名称
               father: "", // 项目分组
               name: "", // 项目名称
               unit: "", // 单位
               id: ""
            }
            selectproductModelByIdApi(scope.row.id).then((res) => {
               let result = res.data;
               this.form.name = result.name;
               this.form.material = result.material;
               this.form.father = result.father;
               this.form.unit = result.unit;
               this.form.id = scope.row.id;
               this.centerDialogVisible = true;
            });
         },
         selectDataList() {
            this.tableData.forEach((a) => {
               a.code = "[1]";
               if (a.children != undefined) {
                  a.children.forEach((b) => {
                     b.code = "[2]";
                  });
               }
            });
         },
         deleteTreeChildren(scope) {
            deleteProductModelApi(scope.row.id).then((res) => {
               this.$message({
                  message: res.message,
                  type: "success",
               });
               this.selectProductModelTable();
            });
         },
         // 表格树全部选中配置
         // 全选/取消选操作
         selectAll(val) {
            this.isAllSelect = !this.isAllSelect;
            let data = this.tableData;
            this.toggleSelect(data, this.isAllSelect, "all");
         },
         //选择某行
         selectTr(selection, row) {
            this.$set(row, "isChecked", !row.isChecked);
            this.$nextTick(() => {
               this.isAllSelect = row.isChecked;
               this.toggleSelect(row, row.isChecked, "tr");
            });
         },
         //递归子级
         toggleSelect(data, flag, type) {
            if (type === "all") {
               if (data.length > 0) {
                  data.forEach((item) => {
                     this.toggleSelection(item, flag);
                     if (item.children && item.children.length > 0) {
                        this.toggleSelect(item.children, flag, type);
                     }
                  });
               }
            } else {
               if (data.children && data.children.length > 0) {
                  data.children.forEach((item) => {
                     item.isChecked = !item.isChecked;
                     this.$refs.multipleTable.toggleRowSelection(item, flag);
                     this.toggleSelect(item, flag, type);
                  });
               }
            }
         },
         //改变选中
         toggleSelection(row, flag) {
            this.$set(row, "isChecked", flag);
            this.$nextTick(() => {
               if (flag) {
                  this.$refs.multipleTable.toggleRowSelection(row, flag);
               } else {
                  this.$refs.multipleTable.clearSelection();
               }
            });
         },
         handleSelectionChange(val) {
            this.deleteList = [];
            val.forEach((v) => {
               if (v.id !== undefined) {
                  this.deleteList.push(v.id);
               }
            });
            console.log(`output->this.deleteList`, this.deleteList);
         },
         // 表格树全部选中配置  结束
         deleteListClick() {
            deleteListApi(this.deleteList).then((res) => {
               this.$message({
                  message: res.message,
                  type: "success",
               });
               this.selectProductModelTable();
            });
         },
         querySearch1(queryString, cb) {
            var restaurants = []
            this.productModelSelectmater.forEach(a => {
               restaurants.push({
                  value: a
               })
            })
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
         },
         querySearch2(queryString, cb) {
            var restaurants = []
            this.projectGroupingOptions.forEach(a => {
               restaurants.push({
                  value: a
               })
            })
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
         },
         createFilter(queryString) {
            return (restaurant) => {
               return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
         },
         clean() {
            this.params = {
               material: this.params.material,
               father: null,
               name: null
            }
            this.selectProductModelTable()
         },
         selectList(){
            this.selectProductMaster().then((res) => {
               this.params.material = this.productModelSelectmater[0];
               this.selectProductModelTable();
            })
         }
      },
      mounted() {
         this.selectList()
      },
      watch: {
         centerDialogVisible: {
            handler(newVal, oldVal) {
               if (newVal == true) {
                  addStandardProjectGroupApi().then((res) => {
                     this.projectGroupingOptions = res.data;
                  });
               } else {
                  // 请求成功清除数据
                  this.form = {};
                  // 提交成功清除检验
                  this.$refs.ruleForm.resetFields();
                  this.isUpdate = false;
               }
            },
         },
      },
   };
</script>

<style>
.el-tag.el-tag {
  border-color: transparent;
  background-color: transparent;
}
.el-tag.el-tag:hover {
  border-color: transparent;
  background-color: transparent;
}
.firstDiv {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eff5ff;
  margin-top: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.main_div {
  width: 100%;
  position: relative;
  padding: 0 10px 10px 10px;
}
.el-dialog__close {
  padding: 8px 0;
  color: #ffffff !important;
}
.addForm {
  padding: 20px 20px 0 20px;
}
.addForm .el-form-item__error {
  left: 66px;
}
.el-dialog {
  border-radius: 10px;
}
.el-dialog__body {
  padding: 30px 20px 0 20px;
}
.table_div {
  margin-top: 10px;
  width: 100%;
  height: calc(100vh - 230px);
  background-color: #ffffff;
  padding: 10px;
}
   .el-tag.el-tag {
      border-color: transparent;
      background-color: transparent;
   }

.top_div {
  height: 120px;
  width: 100%;
  padding: 30px 40px;
  background-color: #ffffff;
}
.top_div_span {
  margin-left: 50px;
}
.top_div_button {
  margin-left: 20px;
}
</style>
   .el-tag.el-tag:hover {
      border-color: transparent;
      background-color: transparent;
   }

   .firstDiv {
      float: left;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #eff5ff;
      margin-top: 5px;
      justify-content: center;
      display: flex;
      align-items: center;
      margin-right: 8px;
   }

   .main_div {
      width: 100%;
      position: relative;
      padding: 0 10px 10px 10px;
   }

   .el-dialog__close {
      padding: 8px 0;
      color: #ffffff !important;
   }

   .addForm {
      padding: 20px 20px 0 20px;
   }

   .addForm .el-form-item__error {
      left: 66px;
   }

   .el-dialog {
      border-radius: 10px;
   }

   .el-dialog__body {
      padding: 30px 20px 0 20px;
   }

   .table_div {
      margin-top: 10px;
      width: 100%;
      height: calc(100vh - 230px);
      background-color: #ffffff;
      padding: 10px;
   }

   .top_div {
      height: 90px;
      width: 100%;
      padding: 30px 40px;
      background-color: #ffffff;
   }

   .top_div_span {
      margin-left: 50px;
   }

   .top_div_button {
      margin-left: 20px;
   }
</style>