style: 产品管理模块样式调整,迁移搜索组件

songshankun

2023-09-21 33dd4cb476136dbcb57ac71c9bb441d3418a507f

style: 产品管理模块样式调整,迁移搜索组件

 package-lock.json

@@ -13,6 +13,8 @@
        "docx-preview": "^0.1.18",
        "downloadjs": "^1.4.7",
        "element-ui": "^2.15.13",
        "faker": "^5.5.3",
        "lodash": "^4.17.21",
        "vue": "^2.6.14",
        "vue-router": "^3.5.1",
        "vuex": "^3.6.2"
@@ -5826,6 +5828,11 @@
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
      "dev": true
    },
    "node_modules/faker": {
      "version": "5.5.3",
      "resolved": "https://registry.npmmirror.com/faker/-/faker-5.5.3.tgz",
      "integrity": "sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g=="
    },
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7396,8 +7403,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
      "dev": true
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",

 package.json

@@ -13,6 +13,8 @@
    "docx-preview": "^0.1.18",
    "downloadjs": "^1.4.7",
    "element-ui": "^2.15.13",
    "faker": "^5.5.3",
    "lodash": "^4.17.21",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"

 public/images/download.png

 public/images/filter.png

 src/assets/style/index.scss

@@ -135,3 +135,24 @@
    margin-left: auto;
  }
}

.border_radius_12{
  border-radius: 12px;
}

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  -webkit-appearance: none;
  background-color: #00000040;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  background: #e1e1e1;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ffffff;
  // background:#2c60c5;
}

 src/assets/style/variable.scss

@@ -20,4 +20,4 @@
$color-border-4: #f2f6fc;

// 背景
$color-bg: #f8f8f9;
$color-bg: #E6ECF2;

 src/components/index.js

@@ -4,8 +4,9 @@
import PagerView from "@/components/makepager/pager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import DetailListCommonBtn from "@/components/makepager/DetailListCommonBtn"
import CommonSearch from "@/components/makepager/CommonSearch"

const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView, DetailListCommonBtn]
const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView, DetailListCommonBtn, CommonSearch]
components.forEach((component) => {
  Vue.component(component.name, component)
})

 src/components/layout/components/AppMain.vue

@@ -24,16 +24,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-main {
  margin-left: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  // height: 100%;
  width: calc(100% - 210px);
  width: calc(100% - 200px);

  .app-main-content {
    width: 100%;
    overflow-y: hidden;
    height: calc(100% - 50px);
  }
}
</style>

 src/components/layout/components/appHeader/index.vue

@@ -37,15 +37,16 @@
<style lang="scss" scoped>
.sales-lead {
  display: flex;
  height: 55px;
  line-height: 55px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-left: -10px;
  height: 50px;
  box-sizing: border-box;
  line-height: 50px;
  background-color: $color-bg;
  border: 1px solid #ccc;
  .header-title {
    margin-left: 16px;
    font-size: 16px;
    color: #475059;
    padding-left: 16px;
    font-size: 18px;
    font-weight: bold;
    color: #171718;
  }
  .header-user-info {
    margin-left: auto;

 src/components/layout/index.vue

@@ -19,10 +19,12 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

.app-content {
  display: flex;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  background-color: $color-bg;
}
</style>

 src/components/makepager/CommonSearch.vue

New file
@@ -0,0 +1,379 @@
<template>
  <div class="search-list">
    <div class="search-top">
      <div class="left">
        <el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">{{
            addTitle
          }}</el-button>
        <div
            class="download"
            v-if="showDownload"
            @click="downloadClick"
            :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }"
        >
          <img
              src="../../../public/images/download.png"
              style="width: 13px"
              alt="下载"
          />
        </div>
        <slot name="leftButton" />
      </div>
      <div v-if="amountView" class="amount">
        <div
            v-if="twoTotalAmount"
            class="top_left"
            style="width: 8%; border: 0"
        >
          <dl>
            <dd class="font_weight">{{ twoObject.value }}</dd>
            <dd class="top_right_bottom">{{ twoObject.label }}</dd>
          </dl>
        </div>
        <div class="top_left" style="width: 10%">
          <dl>
            <dd class="font_weight">{{ totalObject.value }}</dd>
            <dd class="top_right_bottom">{{ totalObject.label }}</dd>
          </dl>
        </div>
        <div class="top_right" style="width: 50%; margin-right: 15px">
          <dl v-for="item in otherOptions" :key="item.label">
            <dd class="font_weight">
              {{ item.value }}
            </dd>
            <dd class="top_right_bottom">
              <span
                  v-if="item.status"
                  class="Badge"
                  :class="item.status"
              ></span>
              <span>{{ item.label }}</span>
            </dd>
          </dl>
        </div>
      </div>
      <div v-else class="amount"></div>
      <div class="search">
        <template v-if="isSearchForm">
          <el-input
              :placeholder="placeholder"
              v-model.trim="searchInput"
              class="input-with-select"
              style="width: 410px"
              clearable
              @change="searchClick"
              @clear="clearClick"
          >
            <i
                slot="suffix"
                class="el-icon-search"
                style="cursor: pointer"
                @click="searchClick"
            ></i>
          </el-input>
        </template>
        <div class="search-Btn" v-if="showActionBtn">
          <div class="common">
            <img
                src="../../../public/images/filter.png"
                style="width: 10px"
                alt="筛选"
            />
            <span>筛选</span>
          </div>
          <div class="common">
            <i class="el-icon-s-fold"></i>
            <span>分组</span>
          </div>
          <div class="common">
            <i class="el-icon-star-on"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div v-if="showSet">
        <i
            class="el-icon-setting cursor_pointer font_size_30"
            style="color: rgb(128,128,128)"
            @click="inspectionConfigClick"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonSearch",
  components: {},
  props: {
    showAdd: {
      type: Boolean,
      default: true,
    },
    showDownload: {
      type: Boolean,
      default: false,
    },
    showActionBtn: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    addTitle: {
      type: String,
      default: "添加",
    },
    totalObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "全部物料",
        };
      },
    },
    otherOptions: {
      type: Array,
      default: () => [
        {
          value: 2,
          label: "安全库存",
          status: "success",
        },
        {
          value: 12,
          label: "欠料",
          status: "error",
        },
        {
          value: 2,
          label: "安全库存",
          status: "success",
        },
        {
          value: 12,
          label: "欠料",
          status: "error",
        },
      ],
    },
    searchSel: {
      type: Object,
      default: () => {
        return {
          value: "name",
          label: "",
        };
      },
    },
    twoTotalAmount: {
      type: Boolean,
      default: false,
    },
    twoObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "车间总量",
        };
      },
    },
    amountView: {
      type: Boolean,
      default: true,
    },
    isSearchForm: {
      type: Boolean,
      default: true,
    },
    showSet: {
      type: Boolean,
      default: false,
    },
    inputName: {
      type: String,
      default: "",
    },
  },
  watch: {
    inputName(val) {
      this.searchInput = val;
    },
  },
  data() {
    return {
      searchInput: "",
      searchSelValue: this.searchSel,
    };
  },
  methods: {
    // 搜索
    searchClick() {
      this.$emit("searchClick", this.searchInput);
    },
    // 清除
    clearClick() {
      this.$emit("clearClick", 1);
    },
    // 添加
    addBtn() {
      this.$emit("addCommonClick");
    },
    // 下载
    downloadClick() {
      this.$emit("downloadClick");
    },
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search-list {
  font-size: 13px;
  color: #333;
  width: 100%;
  .search-top {
    width: 100%;
    display: flex;
    align-items: center;
    .left {
      display: flex;
      width: 150px;
      .download {
        width: 30px;
        height: 30px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #b1b1b1;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .amount {
      flex: 1;
      display: flex;
      justify-content: right;
      .top_left {
        width: 10%;
        border-right: 1px solid #ccc;
        display: flex;
        padding-right: 2%;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        text-align: center;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate",serif;
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
      .top_right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: space-around;
        width: calc(90% - 197px);
        text-align: center;
        color: #666;
        margin-left: 10px;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate",serif;
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
    }
    .search {
      display: flex;
      align-items: center;
      width: auto;
      height: 60px;
      line-height: 60px;
      margin-right: 20px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 22px;
      }
      .search-Btn {
        display: flex;
        margin-left: 40px;
        background: #f3f3f3;
        height: 30px;
        border-radius: 4px;
        align-items: center;
        .common {
          width: 50px;
          text-align: center;
          cursor: no-drop;
        }
      }
    }
  }
  .success {
    background: #06c062;
  }
  .yellow {
    background: #e6a23c;
  }
}

::v-deep {
  .el-input__inner {
    height: 30px;
    color: #2765e1;
  }
  .el-input__prefix,
  .el-input__suffix {
    height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .search {
    .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #da2323;
    }
    // .el-input__suffix {
    //   // 处理前缀图标不垂直居中的问题
    //   height: auto;
    //   font-size: 15px;
    //   &-inner {
    //     flex-direction: row-reverse;
    //     -webkit-flex-direction: row-reverse;
    //     display: flex;
    //   }
    // }
    .el-input--suffix .el-input__inner {
      padding-right: 45px;
    }
    .search-sel .el-input--suffix .el-input__inner {
      padding-left: 5px;
      padding-right: 20px;
    }
  }
}
</style>

 src/components/makepager/TableCommonView.vue

@@ -9,8 +9,9 @@
      :height="'calc(100% - 0px)'"
      :max-height="tableList.maxHeight"
      :lazy="tableList.lazy"
      size="mini"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
      :header-cell-style="{ background: '#f1f3f8', color: '#000009' , 'font-size': '14px'}"
      :highlight-current-row="tableList.highlight"
      :row-class-name="tableRowClassName"
      @row-click="tableRowClick"
@@ -18,9 +19,9 @@
      :default-expand-all="tableList.isDefaultExpandAll"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
      <el-table-column
      <el-table-column align="center" v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
      <el-table-column align="center" v-if="tableList.selectIndex" type="index" label="序号" width="50"> </el-table-column>
      <el-table-column align="center"
        v-for="(item, i) in tableList.tableColumn"
        :key="i"
        :prop="item.prop"
@@ -344,4 +345,12 @@
    //   }
  }
}

::v-deep {
  .el-table {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: auto;
  }
}
</style>

 src/views/productManage/index.vue

@@ -1,7 +1,5 @@
<template>
  <div class="content">
    <router-view />
  </div>
  <router-view />
</template>

<script>
@@ -13,9 +11,9 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #fff;
  height: calc(100vh - 70px);
}
//.content {
//  width: 100%;
//  background-color: #fff;
//  height: calc(100vh - 70px);
//}
</style>

 src/views/productManage/product/index.vue

@@ -1,18 +1,30 @@
<template>
  <div class="rightContent">
    <div class="top">
      <div class="supplier-search">
        <SearchCommonView
          ref="searchCommonView"
          :search-options="searchOptions"
          @searchClick="searchClick"
          @resetClick="resetClick"
  <div class="product-manage">
    <div class="filter">
      <div class="filter-card">
<!--              <SearchCommonView-->
<!--                  ref="searchCommonView"-->
<!--                  :search-options="searchOptions"-->
<!--                  @searchClick="searchClick"-->
<!--                  @resetClick="resetClick"-->
<!--              />-->

        <CommonSearch
          :show-add="false"
          :show-download="false"
          :amount-view="false"
          :show-action-btn="false"
          :placeholder="'请输入产品名称/供应商'"
          @searchClick="onFilterSearch"
        />

        <div class="add-view">
          <!-- <el-button type="primary" size="mini" @click="addBtnClick">新建</el-button> -->
          <!--           <el-button type="primary" size="mini" @click="addBtnClick">新建</el-button>-->
        </div>
      </div>
      <template>
    </div>
    <div class="body">
      <div class="body-card">
        <div class="list-view">
          <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
            <!-- <template slot="tableButton">
@@ -25,11 +37,11 @@
          </template> -->
          </TableCommonView>
        </div>

        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
      </template>
      </div>

    </div>
    <!-- 新建/编辑产品 -->
    <AddProduct v-if="editConfig.visible" :add-common-config="editConfig" />
@@ -52,6 +64,7 @@
  computed: {},
  data() {
    return {
      searchText:'',
      tableList: {},
      searchOptions: [],
      commonDetail: {
@@ -119,6 +132,15 @@
      console.log(val, content)
      this.getData(val.value, content)
    },

    onFilterSearch(val){
      this.searchText = val ?? ''
      console.log(this.searchText)

      // TODO: 需要接口支持
      throw new Error("功能未实现")
    },

    resetClick() {
      this.getData()
    },
@@ -165,14 +187,35 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rightContent {
.product-manage{
  height: 100%;
  background: #f0f2f5;
  padding: 10px;
  .top {
    margin-bottom: 20px;
    height: calc(100% - 30px);
    background: #fff;
  overflow: hidden;
  .filter{
    height: 80px;
    display: flex;
    align-items: center;
    padding: 12px 20px 0 20px;
    &-card{
      height: 80px;
      display: flex;
      align-items: center;
      flex: 1;
      border-radius: 12px;
      background-color: #fff;
    }
  }
  .body{
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 12px;
    height: calc(100% - 92px);
    .body-card {
      background-color: #fff;
      border-radius: 12px;
      height: 100%;
      overflow: hidden;
    }

    .supplier-search {
      display: flex;
      align-items: center;
@@ -182,7 +225,8 @@
      }
    }
    .list-view {
      height: calc(100% - 120px);
      height: calc(100% - 60px);
      overflow: hidden;
    }
    .btn-pager {
      display: flex;