Merge branch 'master' of http://192.168.5.5:10010/r/silk/silk-web

yangfeng

2024-03-05 baeb25b20d147adbcb8ea6c398eb0bbc9a2f92bb

Merge branch 'master' of http://192.168.5.5:10010/r/silk/silk-web

 src/api/date.js

New file
@@ -0,0 +1,210 @@
export default (() => {
  const getDateObj = ms => {
    const now = ms ? new Date(ms) : new Date()
    const y = now.getFullYear()
    let m = now.getMonth() + 1
    m = m > 9 ? m : '0' + m
    let d = now.getDate()
    d = d > 9 ? d : '0' + d
    return { y, m, d }
  }
  // 获取当前日期
  const getCurrentDate = ms => {
    const dateObj = getDateObj(ms)
    return '' + dateObj.y + '-' + dateObj.m + '-' + dateObj.d
  }
  //获取当前 前后N天的时间
  const getDateStr = (AddDayCount = 0) => {
    let dd = new Date()
    dd.setDate(dd.getDate() + AddDayCount)
    let y = dd.getFullYear()
    let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) //获取当前月份的日期，不足10补0
    let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() //获取当前几号，不足10补0
    return y + '-' + m + '-' + d
  }
  //获取某个日期 前后N天的时间
  const getDateDay2 = (time, AddDayCount) => {
    if (time) {
      let dd = new Date(time)
      dd.setDate(dd.getDate() + AddDayCount)
      let y = dd.getFullYear()
      let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) //获取当前月份的日期，不足10补0
      let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() //获取当前几号，不足10补0
      return y + '-' + m + '-' + d
    } else {
      return '--'
    }
  }
  //获取当前年份
  const getCurrentYear = ms => {
    const dateObj = getDateObj(ms)
    return '' + dateObj.y
  }
  // 获取当前月份
  const getCurrentMonth = ms => {
    const dateObj = getDateObj(ms)
    return '' + dateObj.y + '-' + dateObj.m
  }
  // 获取上月月份
  const getPreviousMonth = ms => {
    const dateObj = getDateObj(ms)
    const b = dateObj.m - 1 > 0
    let y = b ? dateObj.y : dateObj.y - 1
    let m = b ? dateObj.m - 1 : 12
    m = m > 9 ? m : '0' + m
    return '' + y + '-' + m
  }
  // 获取下月月份
  const getNextMonth = ms => {
    const dateObj = getDateObj(ms)
    const b = dateObj.m - (-1) != 13;
    let y = b ? dateObj.y : dateObj.y + 1
    let m = b ? dateObj.m - (-1) : 1
    m = m > 9 ? m : '0' + m
    return '' + y + '-' + m
  }
  // 格式化时间 ==> yyyy-mm-dd
  const formatDate = (value, str) => {
    if (value) {
      let date_arr = value.split(str)
      let m = date_arr[1].length == 1 && date_arr[1] < 10 ? '0' + date_arr[1] : date_arr[1]
      let d = date_arr[2].length == 1 && date_arr[2] < 10 ? '0' + date_arr[2] : date_arr[2]
      return date_arr[0] + '-' + m + '-' + d
    } else {
      return '--'
    }
  }
  const getK = value => {
    if (value) {
      let date = new Date(value)
      return date
    } else {
      let v = new Date().getTime()
      return v
    }
  }
  //转为时间戳
  const formatTime = value => {
    if (value) {
      let date = new Date(value)
      return date.getTime()
    }
  }
  const formatDate2 = (time, format = 'YY-MM-DD hh:mm:ss') => {
    if (time) {
      let date = time ? new Date(time) : new Date()
      let year = date.getFullYear(),
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds()
      let preArr = Array.apply(null, Array(10)).map(function (elem, index) {
        return '0' + index
      }) //开个长度为10的数组 格式为 00 01 02 03

      let newTime = format
        .replace(/YY/g, year)
        .replace(/MM/g, preArr[month] || month)
        .replace(/DD/g, preArr[day] || day)
        .replace(/hh/g, preArr[hour] || hour)
        .replace(/mm/g, preArr[min] || min)
        .replace(/ss/g, preArr[sec] || sec)

      return newTime
    } else {
      return '--'
    }
  }

  const getLastDay = dateStr => {
    dateStr = dateStr || getCurrentMonth()
    let nextMonthMS = new Date(getNextMonth(new Date(dateStr).getTime())).getTime()
    return getCurrentDate(new Date(nextMonthMS - 1000 * 60 * 60 * 24).getTime())
  }

  // 对比时间
  const compareTime = (date1, date2) => {
    let d1_date1 = new Date(date1),
      d1_date2 = new Date(date2);
    let time_span1 = d1_date1.getTime(),
      time_span2 = d1_date2.getTime();
    return time_span1 - time_span2;
  }
  //格式yy-mm month1小的  month2大的
  const intervalMonth = (month1, month2) => {
    let yearMonth, number;
    let year1 = Number(getCurrentYear(month1));
    let year2 = Number(getCurrentYear(month2));
    if (year1 != year2) {
      yearMonth = (year2 - year1) * 12;
    } else {
      yearMonth = 0;
    }
    let min = Number(month1.split('-')[1]);
    let max = Number(month2.split('-')[1]);
    if (min < max) {
      number = max - min + yearMonth + 1
    } else {
      number = yearMonth - (min - max) + 1
    }
    return Number(number);
  }
  //获取季度的时间 val 例如 yyyy,1 最终结果  yyyy-mm-dd,yyyy-mm-dd
  const qurterDay = (val) => {
    let value;
    let num = val.split(',')[1]
    if (num == 1) {
      value = val.split(',')[0] + '-01-01,' + val.split(',')[0] + '-03-31'
    } else if (num == 2) {
      value = val.split(',')[0] + '-04-30,' + val.split(',')[0] + '-06-30'
    } else if (num == 3) {
      value = val.split(',')[0] + '-07-31,' + val.split(',')[0] + '-09-30'
    } else if (num == 4) {
      value = val.split(',')[0] + '-10-30,' + val.split(',')[0] + '-12-31'
    }
    return [value, num];
  }
  //获取某月最后一天
  const getMonthLastDay = (dateStr) => {
    let dateObj = getNextMonth(dateStr)
    let date = getDateDay2(dateObj + '-01', -1)
    return date
  }
  /*获取当前日期*/
  const getWeekdayTime = (value) => {
    let d = new Date(value)
    let week = d.getDay()
    let weekday = ''
    if (week == 0)
      weekday = '星期日'
    else if (week == 1)
      weekday = '星期一'
    else if (week == 2)
      weekday = '星期二'
    else if (week == 3)
      weekday = '星期三'
    else if (week == 4)
      weekday = '星期四'
    else if (week == 5)
      weekday = '星期五'
    else if (week == 6)
      weekday = '星期六'
    return weekday
  }
  //计算当前时间到今天结束时还剩多少 毫秒
  const getRestOfDayTime = () => {
    let x = new Date();
    x.setHours(0, 0, 0, 0);
    let y = new Date();
    return 24 * 3600 * 1000 - (y.getTime() - x.getTime())
  }
  /* 用于月日这种需要加前置0的方法
  *  @param num  需要加0的参数 string | number
  *  @return 结果 始终保证结果为字符串  string
  */
  const paddingZero = (num) => {
    return num < 10 ? "0" + num : String(num)
  }
  return { paddingZero, getDateObj, getCurrentDate, getDateStr, getDateDay2, getCurrentYear, getCurrentMonth, getPreviousMonth, getNextMonth, formatDate, formatDate2, formatTime, getK, compareTime, getLastDay, intervalMonth, getMonthLastDay, qurterDay, getWeekdayTime, getRestOfDayTime }
})()

 src/api/employeeManage/employeeInfo.js

New file
@@ -0,0 +1,42 @@
import request from "@/common/untils/request.js"

// 跟进记录列表
export function getFollowRecordList(data) {
  return request({
    url: "/api/followRecord/list",
    method: "post",
    data
  })
}
// 添加跟进记录
export function getAddFollowRecord(data) {
  return request({
    url: "/api/followRecord/add",
    method: "post",
    data
  })
}
// 删除跟进记录
export function getDeleteFollowRecord(data) {
  return request({
    url: "/api/followRecord/delete",
    method: "delete",
    data
  })
}
// 更新跟进记录
export function getUpdateFollowRecord(data) {
  return request({
    url: "/api/followRecord/update",
    method: "put",
    data
  })
}

// 联系方式列表
export function getContactInfoList() {
  return request({
    url: "/api/contactInformation/list",
    method: "get"
  })
}

 src/api/employeeSalary/attendanceStatistics.js

New file
@@ -0,0 +1,42 @@
import request from "@/common/untils/request.js"

// 跟进记录列表
export function getFollowRecordList(data) {
  return request({
    url: "/api/followRecord/list",
    method: "post",
    data
  })
}
// 添加跟进记录
export function getAddFollowRecord(data) {
  return request({
    url: "/api/followRecord/add",
    method: "post",
    data
  })
}
// 删除跟进记录
export function getDeleteFollowRecord(data) {
  return request({
    url: "/api/followRecord/delete",
    method: "delete",
    data
  })
}
// 更新跟进记录
export function getUpdateFollowRecord(data) {
  return request({
    url: "/api/followRecord/update",
    method: "put",
    data
  })
}

// 联系方式列表
export function getContactInfoList() {
  return request({
    url: "/api/contactInformation/list",
    method: "get"
  })
}

 src/assets/style/index.scss

@@ -123,6 +123,27 @@
.font_size_40 {
  font-size: 40px !important;
}
.color_333 {
  color: #333;
}
.color_666 {
  color: #666;
}
.color_blue {
  color: #2a78fb;
}
.color_67c23a {
  color: #67c23a;
}
.color_red {
  color: red;
}
.color_FF9900 {
  color: #ff9900;
}
.background_blue{
  background: #2a78fb;
}
.cursor_pointer {
  cursor: pointer;
}

 src/assets/style/reset-element.scss

@@ -9,7 +9,7 @@
  }
}
.el-dialog__body {
  padding: 0px;
  padding: 30px 20px;
}
.el-dialog__footer {
  height: 55px;

 src/components/makepager/CommonSearch.vue

@@ -232,7 +232,7 @@
    align-items: center;
    .left {
      display: flex;
      width: 150px;
      width: 300px;
      .download {
        width: 30px;
        height: 30px;

 src/components/makepager/TableCommonView.vue

@@ -2,6 +2,7 @@
  <div class="table-view">
    <el-table
      ref="table"
      :class="tableList.headerColor=='red'?'table-red':''"
      border
      :data="tableList.tableInfomation"
      tooltip-effect="dark"
@@ -102,7 +103,7 @@
    </el-table>
    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
    <div class="styleBtn">
      <i @click="checkCol()" class="label">...</i>
      <i @click="checkCol()" v-if="colOpenShow"  class="label">...</i>
      <el-checkbox-group
          v-model="showcol"
          v-show="iscolopen"
@@ -137,6 +138,11 @@
          ]
        }
      }
    },
     // 是否可以配置列表 表头
     colOpenShow: {
      type: Boolean,
      default: true,
    },
    showSummary: {
      type: Object,
@@ -397,7 +403,9 @@
  height: 35px;
  text-align: center;
}

::v-deep  .table-red.el-table th.el-table__cell>.cell{
  color:red;
}
::v-deep{
  .el-table .cell .el-button--text.el-button--small{
    padding: 4px 0;

 src/views/employeeManage/employeeInfo/components/AddEmployee.vue

New file
@@ -0,0 +1,182 @@
<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="islook" width="40rem" class="add-event-dialog"
    @close="cancelMethod">
    <div slot="title" class="tac drawerHeader">{{ editRow.title }}人员</div>
    <div class="dialog-content-box">
      <el-form class="form-box" ref="form" :rules="rules" :model="form" label-width="120px" label-position="right">
        <el-form-item label="员工编码：" prop="id">
          <el-input v-model="form.id" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="人员姓名：" prop="name">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="phoneNum">
          <el-input v-model="form.phoneNum" placeholder="请输入" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="入职时间：" prop="date">
          <el-date-picker v-model="form.date" style="width:100%;" type="date" placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车间：" prop="phoneNum">
          <el-select v-model="form.phoneNum" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组别：" prop="phoneNum">
          <el-select v-model="form.phoneNum" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工种：" prop="phoneNum">
          <el-select v-model="form.phoneNum" filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer tac">
      <el-button type="cancel" @click="cancelMethod()">取消</el-button>
      <el-button type="primary" @click="submitForm('form')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeleteFollowRecord } from "@/api/employeeManage/employeeInfo.js"
export default {
  props: {
    editRow: {
      type: Object,
    }
  },
  data() {
    return {
      islook: false,
      form: {
        id: '',
        name: '',
        phoneNum: '',
      },
      rules: {
        id: [
          {
            required: true,
            message: "请输入人员姓名",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入员工编码",
            trigger: ["blur", "change"],
          },
        ],
        phoneNum: [
          {
            required: false,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          { len: 11, message: "长度在11个字符", trigger: "blur" },
          {
            pattern:
              /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
            message: "请输入正确的手机号",
            trigger: ["blur", "change"],
          },
        ],
      },
      DeviceList: [],
    };
  },
  created() {
  },
  watch: {
    islook(newVal) {
      if (newVal) {
        this.formInfo()
      }
    },
    editRow() {
      this.formInfo()
    },
  },
  methods: {
    formInfo() {
      if (this.islook) {
        this.form = {
          explain: "",
          prefixId: "",
          id: "",
          number: 0,
          remark: "",
          status: "",
          frockLife: "",
          frockName: "",
          vendor: "",
        };
        this.$nextTick(()=>{
          this.$refs["form"].resetFields();
          if (this.editRow.id) {
            this.form = JSON.parse(JSON.stringify(this.editRow));
          }
        })
      }
    },
    cancelMethod() {
      this.$refs["form"].resetFields();
      this.islook = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          if (this.editRow.type == "add") {
            getDeleteFollowRecord(form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                });
                this.cancelMethod();
              }
            });
          } else {
            getDeleteFollowRecord(form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功！",
                  type: "success",
                });
                this.cancelMethod();
              }
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-content-box {
  height: 28rem;

  .form-box {
    width: 90%;
    padding: 0 5%;
    height: 100%;
    overflow-y: auto;

  }
}
</style>

 src/views/employeeManage/employeeInfo/index.vue

@@ -1,21 +1,253 @@
<template>
  <div class="container"></div>
  <div class="silkRegister-form">
    <div class="filter">
      <div class="filter-card">
        <CommonSearch
          :show-add="false"
          :show-download="false"
          :amount-view="false"
          :show-action-btn="false"
          placeholder="请输入关键词"
          @searchClick="onFilterSearch"
        >
          <template slot="leftButton">
            <el-button size="small" type="primary" @click="addBtnClick">新增</el-button>
          </template>
        </CommonSearch>
      </div>
    </div>

    <div class="body">
      <div class="body-card">
        <div class="list-view">
          <TableCommonView
            ref="tableListRef"
            v-loading="loading"
            :table-list="tableList"
            @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column label="操作" width="90" fixed="right">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </template>
          </TableCommonView>
        </div>
        <div class="btn-pager">
          <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
        </div>
      </div>
    </div>
    <AddEmployee ref="addEmployee" :editRow="editRow"  @shutdown="shutdown" />
  </div>
</template>

<script>
import { getFollowRecordList, getDeleteFollowRecord } from "@/api/employeeManage/employeeInfo.js"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import AddEmployee from  "@/views/employeeManage/employeeInfo/components/AddEmployee"
export default {
  name: "employeeInfo",
  props: {},
  components: {},
  mixins: [],
  computed: {},
  data() {
    return {}
  name: "SilkRegisterForm",
  props: {
  },
  created() {},
  methods: {}
  mixins: [pageMixin],
  components: {
    AddEmployee,
  },
  data() {
    return {
      tableList: {},
      loading: false,
      searchOptions: [],
      editRow: {
        title: "新建",
      },
      search_map: {},
      tableColumn: [
        { label: "员工编码", prop: "topic", min: 120, default: true }, // 主题
        { label: "姓名", prop: "client_name", min: 190, }, // 客户名称
        { label: "手机号", prop: "contact_name", min: 130, }, // 联系人姓名
        { label: "车间", prop: "client_status", min: 100 }, // 客户状态
        { label: "组别", prop: "contact_information_name", min: 100 }, // 联系方式
        { label: "工种", prop: "follow_time", min: 130 }, // 联系人日期
        { label: "添加时间", prop: "next_follow_time", min: 130 }, // 下次回访日期
        { label: "添加人", prop: "member_name", min: 110 }, // 负责人
      ],
      showCol: [
        "员工编码",
        "姓名",
        "手机号",
        "车间",
        "组别",
        "工种",
        "添加时间",
        "添加人",
      ]
    }
  },
  created() {
    this.setTable()
    this.getData(this.search_map)
  },
  computed: {
  },
  methods: {
    setTable() {
      this.tableList = {
        selectIndex: true,
        tableInfomation: [],
        allcol: [],
        showcol: this.showCol,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
      this.searchOptions = []
      for (let i = 0; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        const value = this.tableList.tableColumn[i].prop
        this.searchOptions.push({ value: value, label: label })
      }
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    // 请求数据
    async getData() {
      this.loading = true
      await getFollowRecordList({
        search_map: this.search_map,
        page: this.pagerOptions.currPage,
        pageSize: this.pagerOptions.pageSize
      })
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            if (res.data.list && res.data.list.length > 0) {
              const list = res.data.list.map((item) => {
                return {
                  ...item,
                  client_name: item.client.name,
                  contact_name: item.contact.name,
                  client_status: item.client_status.name,
                  phone: item.contact.phone,
                  member_name: item.member.username,
                  contact_information_name: item.contact_information.name
                }
              })
              this.tableList.tableInfomation = list || []
              this.pagerOptions.totalCount = res.data.count
            } else {
              this.tableList.tableInfomation = []
            }
          } else {
            this.tableList.tableInfomation = []
          }
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
          this.tableList.tableInfomation = []
          this.loading = false
        })
    },
    // 搜索
    onFilterSearch(searchText) {
      this.search_map.client_name = searchText ?? ""
      this.pagerOptions.currPage = 1
      this.getData()
    },
    shutdown() {
      this.getData();
    },
    // 新建
    addBtnClick() {
      this.editRow = { title:'新建',type:'add' }
      this.$refs.addEmployee.islook = true;
    },
    // 编辑
    handleClick(row) {
      let config=JSON.parse(JSON.stringify(row));
      this.editRow = { ...config, title:'编辑',type:'add' }
      this.$refs.addEmployee.islook = true;
    },
    // 删除
    delClick(id) {
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          getDeleteFollowRecord({ ids: [id] }).then((response) => {
            if (response.code === 200) {
              this.$message.success("删除成功")
              this.getData()
            } else {
              this.$message.warning("删除失败")
            }
          })
        })
        .catch(() => {})
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.silkRegister-form {
  height: 100%;
  overflow: hidden;
  .filter {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 12px 20px 0 20px;
    &-card {
      height: 80px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 20px;
      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;
    }
    .list-view {
      height: calc(100% - 60px);
      overflow: hidden;
    }
    .btn-pager {
      display: flex;
      margin-top: 10px;
      .page {
        margin-left: auto;
      }
    }
  }
}
</style>

 src/views/productManage/silkInspectForm/index.vue

@@ -179,9 +179,9 @@
    },
    // 新建
    addBtnClick() {
      this.editConfig.title = "新建"
      this.editConfig.infomation = { contact_name:"",sales_leads_name:"",sale_chance_name:""}
      this.editConfig.visible = true
      this.$router.push({
        path:"/productManage/silkRegisterForm/addPage?activeName=second",
      });
    },
     // 打印
     printClick(){

 src/views/productManage/silkRegisterForm/addPage.vue

@@ -1,53 +1,220 @@
<template>
    <div class="custom-manage">
      <div class="tab-view">
        <el-tabs v-model="activeName" @tab-click="tabsClick">
          <el-tab-pane label="纤度登记表" name="first"></el-tab-pane>
          <el-tab-pane label="纤度检验表" name="second"></el-tab-pane>
        </el-tabs>
      </div>
  
      <div class="filter">
        <div class="filter-card">
          <CommonSearch
              :show-add="false"
              :show-download="false"
              :amount-view="false"
              :show-action-btn="false"
              placeholder="请输入关键词"
              @searchClick="onFilterSearch"
          >
            <template slot="leftButton">
              <el-button size="small" type="primary"  @click="cancelClick">放弃</el-button>
              <el-button size="small" type="primary"  @click="saveClick">保存</el-button>
            </template>
          </CommonSearch>
        <div class="tab-view">
            <el-tabs v-model="activeName" @tab-click="tabsClick">
                <el-tab-pane label="纤度登记表" name="first"></el-tab-pane>
                <el-tab-pane label="纤度检验表" name="second"></el-tab-pane>
            </el-tabs>
        </div>
      </div>
  
      <div class="body">
        <div class="body-card">
          <div class="list-view">
            <TableCommonView
                ref="tableListRef"
                v-loading="loading"
                :table-list="tableList"
                @selTableCol="selTableCol"
            >
            </TableCommonView>
          </div>
          <div class="btn-pager">
            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
          </div>

        <div class="filter">
            <div class="filter-card">
                <CommonSearch :show-add="false" :show-download="false" :amount-view="false" :show-action-btn="false"
                    placeholder="请输入关键词" @searchClick="onFilterSearch">
                    <template slot="leftButton">
                        <el-button size="small" type="primary" @click="cancelClick">放弃</el-button>
                        <el-button size="small" type="primary" @click="saveClick">保存</el-button>
                    </template>
                </CommonSearch>
            </div>
        </div>
      </div>

        <div class="body" v-if="activeName == 'first'">
            <div class="body-l">
                <el-form ref="form" class="form-box" :model="form" :rules="rules" label-position="left" label-width="70px">
                    <el-form-item label="编号" prop="clientName" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="落丝时间" prop="signTime" class="form-item">
                        <el-date-picker v-model="form.signTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                            style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="庄口" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车间" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="规格" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="组别" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择" style="width: 100%">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="回数" prop="amount" class="form-item">
                        <el-row>
                            <el-col :span="11">
                                <el-input v-model.number="form.amount" placeholder="请输入" show-word-limit
                                    style="width: 100%"></el-input>
                            </el-col>
                            <el-col :span="2" style="margin:0 auto;text-align:center;">-</el-col>
                            <el-col :span="11">
                                <el-input v-model.number="form.amount" placeholder="请输入" show-word-limit
                                    style="width: 100%"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="车号" prop="clientName" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="list-view">
                    <TableCommonView ref="tableListRef" :colOpenShow="false" v-loading="loading" :table-list="tableList"
                        @selTableCol="selTableCol">
                    </TableCommonView>
                </div>
            </div>
            <div class="body-r">
                纤度：
                <p>19.00</p>
            </div>
        </div>
        <div class="body-two body" v-if="activeName == 'second'">
            <div class="body-two-t">纤度检验表</div>
            <el-form ref="form" class="form-box" :model="form" :rules="rules" label-position="right" label-width="60px">
                <div class="form-box-t">
                    <el-form-item label="编号" prop="clientName" class="form-item">
                        1234546677
                    </el-form-item>
                    <el-form-item label="车间" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="组别" prop="deliverType" class="form-item">
                        <el-select v-model="form.deliverType" placeholder="请选择" style="width: 100%">
                            <el-option v-for="item in deliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="回数" prop="amount" class="form-item">
                        <el-input v-model.number="form.amount" placeholder="请输入" show-word-limit
                            style="width: 100%"></el-input>
                    </el-form-item>
                    <el-form-item label="规格" prop="clientName" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="日期" prop="signTime" class="form-item">
                        <el-date-picker v-model="form.signTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                            style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div class="list-view">
                    <el-table ref="multipleTable" :data="tableTwoList.tableInfomation" tooltip-effect="dark"
                        style="width: 100%">
                        <el-table-column label="车号" prop="templateName" width="100">
                        </el-table-column>
                        <el-table-column label="下差纤度" prop="name" width="100" align="center">
                            <template v-for="(item, i) in tableTwoList.lower">
                                <el-table-column align="center" :key="i" :prop="item.prop" :label="item.label"
                                    :width="item.width" :min-width="item.min" show-overflow-tooltip
                                    :sortable="item.sortable">
                                </el-table-column>
                            </template>
                        </el-table-column>
                        <el-table-column label="目的纤度" prop="name" width="100" align="center">
                            <template v-for="(item, i) in tableTwoList.objective">
                                <el-table-column align="center" :key="i" :prop="item.prop" :label="item.label"
                                    :width="item.width" :min-width="item.min" show-overflow-tooltip
                                    :sortable="item.sortable">
                                </el-table-column>
                            </template>
                        </el-table-column>
                        <el-table-column label="上差纤度" prop="name" width="100" align="center">
                            <template v-for="(item, i) in tableTwoList.upper">
                                <el-table-column align="center" :key="i" :prop="item.prop" :label="item.label"
                                    :width="item.width" :min-width="item.min" show-overflow-tooltip
                                    :sortable="item.sortable">
                                </el-table-column>
                            </template>
                        </el-table-column>
                        <el-table-column prop="valueRange" label="偏差" width="120">
                        </el-table-column>
                        <el-table-column prop="unit" label="总差" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="valueRange" label="野纤" width="120">
                        </el-table-column>
                        <el-table-column prop="unit" label="大野" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="valueRange" label="特野" width="120">
                        </el-table-column>
                        <el-table-column prop="unit" label="等级" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="valueRange" label="II度" width="120">
                        </el-table-column>
                        <el-table-column prop="unit" label="清洁" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="valueRange" label="洁净" width="120">
                        </el-table-column>
                        <el-table-column prop="unit" label="备注" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="form-box-b">
                    <el-form-item label="平均纤度" prop="clientName" class="form-item-two" label-width="100px">
                        1234546677
                    </el-form-item>
                    <el-form-item label="公量纤度" prop="deliverType" class="form-item" label-width="100px">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="偏差" prop="clientName" class="form-item-two">
                        0.98
                    </el-form-item>
                    <el-form-item label="总差" prop="clientName" class="form-item-two">
                        0.98
                    </el-form-item>
                    <el-form-item label="车组等级" prop="deliverType" class="form-item-two"  label-width="100px">
                        4A
                    </el-form-item>
                    <el-form-item label="II度" prop="amount" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="清洁" prop="clientName" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="洁净" prop="signTime" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="庄口工艺单编号" prop="signTime" class="form-item" label-width="110px">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="检验员" prop="signTime" class="form-item">
                        <el-input v-model="form.clientName" placeholder="请输入">
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
  </template>
</template>
  
  <script>
 import { getFollowRecordList } from "@/api/productManage/silkRegisterForm.js"
  import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
  export default {
<script>
import { getFollowRecordList } from "@/api/productManage/silkRegisterForm.js"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
    name: "silkRegisterAddPage",
    props: {},
    mixins: [pageMixin],
@@ -55,206 +222,366 @@
    },
    computed: {},
    data() {
      return {
        tableList: {},
        loading: false,
        activeName: "first",
        searchOptions: [],
        search_map: {},
        is_public:true,
        tableColumn:[
          { label: "车号", prop: "name", min: 100, default:true}, // 客户名称
          { label: "纤度值", prop: "member_name", default:true }, // 销售负责人
          { label: "数量", prop: "client_level" , default:true}, // 重要级别
          { label: "纤度合计", prop: "next_visit_time", min: 90, default:true }, // 下次回访日期
        ],
        showCol:['车号','纤度值','数量','纤度合计']
      }
        return {
            tableList: {},
            loading: false,
            activeName: "first",
            searchOptions: [],
            search_map: {},
            is_public: true,
            tableColumn: [
                { label: "车号", prop: "name", min: 100, default: true }, // 客户名称
                { label: "纤度值", prop: "member_name", default: true }, // 销售负责人
                { label: "数量", prop: "client_level", default: true }, // 重要级别
                { label: "纤度合计", prop: "next_visit_time", min: 90, default: true }, // 下次回访日期
            ],
            showCol: ['车号', '纤度值', '数量', '纤度合计'],
            deliveryTypeList: [],
            form: {},
            rules: {
                clientName: [
                    { required: true, message: "请选择客户名称", trigger: "change" },
                ],
            },
            tableTwoList: {
                tableInfomation: [],
                lower: [
                    { label: "14", prop: "name", min: 100, default: true },
                    { label: "14.5", prop: "member_name", default: true },
                    { label: "15", prop: "client_level", default: true },
                    { label: "15.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "16", prop: "name", min: 100, default: true },
                    { label: "16.5", prop: "member_name", default: true },
                    { label: "17", prop: "client_level", default: true },
                    { label: "17.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "18", prop: "client_level", default: true },
                    { label: "18.5", prop: "next_visit_time", min: 90, default: true },
                ],
                objective: [
                    { label: "19", prop: "name", min: 100, default: true },
                    { label: "19.5", prop: "member_name", default: true },
                    { label: "20", prop: "client_level", default: true },
                    { label: "20.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "21", prop: "name", min: 100, default: true },
                ],
                upper: [
                    { label: "21.5", prop: "name", min: 100, default: true },
                    { label: "22", prop: "member_name", default: true },
                    { label: "22.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "23", prop: "name", min: 100, default: true },
                    { label: "23.5", prop: "member_name", default: true },
                    { label: "24", prop: "client_level", default: true },
                    { label: "24.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "25", prop: "client_level", default: true },
                    { label: "25.5", prop: "next_visit_time", min: 90, default: true },
                    { label: "26", prop: "client_level", default: true },
                    { label: "26.5", prop: "next_visit_time", min: 90, default: true },
                ],
            },
        }
    },
    created() {
      this.setTable()
      this.search_map = {
        is_public: this.is_public
      }
      this.getData()
        let query = this.$route.query;
        if (query) {
            this.activeName = query.activeName ? query.activeName : "first";
        }
        this.setTable()
        this.search_map = {
            is_public: this.is_public
        }
        this.getData()
    },
    methods: {
      setTable() {
        this.tableList = {
          selectIndex: true,
          tableInfomation: [],
          allcol: [],
          showcol: this.showCol,
          tableColumn:this.setColumnVisible(this.showCol)
        }
        this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
        this.searchOptions = []
        for (let i = 0; i < this.tableList.tableColumn.length; i++) {
          const label = this.tableList.tableColumn[i].label
          const value = this.tableList.tableColumn[i].prop
          this.searchOptions.push({ value: value, label: label })
        }
      },
      setColumnVisible(showCol){
        return  this.tableColumn.map(ele=>{
          return {
            ...ele,
            isShowColumn:showCol.includes(ele.label)
          }
        })
      },
      selTableCol(val) {
        this.showcol = val;
        this.tableList.tableColumn = this.setColumnVisible(val);
      },
      // 请求数据
      async getData() {
        this.loading = true
        await getFollowRecordList({
          search_map: this.search_map,
          page: this.pagerOptions.currPage,
          pageSize: this.pagerOptions.pageSize
        })
          .then((res) => {
            console.log(res)
            if (res.code === 200) {
              if (res.data.list && res.data.list.length > 0) {
                const list = res.data.list.map((item) => {
                  let contact_name = ""
                  let contact_phone = ""
                  let contact_id = 0
                  let contact_wechat = ""
                  let contact_email = ""
                  let position = ""
                  if (item.contacts.length !== 0) {
                    for (let i = 0; i < item.contacts.length; i++) {
                      if (item.contacts[i].is_first) {
                        contact_name = item.contacts[i].name
                        contact_phone = item.contacts[i].phone
                        contact_id = item.contacts[i].id
                        contact_wechat = item.contacts[i].wechat
                        contact_email = item.contacts[i].email
                        position = item.contacts[i].position
                      }
                    }
                  }
                  return {
                    ...item,
                    contact_name: contact_name,
                    contact_phone: contact_phone,
                    client_level: item.client_level.name,
                    client_status: item.client_status.name,
                    contact_id: contact_id,
                    member_name: item.member.username,
                    contact_wechat: contact_wechat,
                    contact_email: contact_email,
                    position: position
                  }
                })
                this.tableList.tableInfomation = list || []
                this.pagerOptions.totalCount = res.data.count
              } else {
                this.tableList.tableInfomation = []
              }
            } else {
              this.tableList.tableInfomation = []
        setTable() {
            this.tableList = {
                selectIndex: false,
                headerColor: 'red',
                tableInfomation: [],
                allcol: [],
                showcol: this.showCol,
                tableColumn: this.setColumnVisible(this.showCol)
            }
            this.loading = false
          })
          .catch((err) => {
            console.log(err)
            this.tableList.tableInfomation = []
            this.loading = false
          })
      },
      tabsClick(tab) {
        console.log(tab.name)
        if (tab.name === "first") {
          this.is_public = true
        } else {
          this.is_public = false
        }
        this.search_map = {
          is_public: this.is_public
        }
        this.pagerOptions.currPage = 1
        this.getData()
      },
      // 搜索
      onFilterSearch(searchText){
        this.search_map = {
          is_public: this.is_public,
          name: searchText
        }
        this.pagerOptions.currPage = 1
        this.getData()
      },
      // 放弃
      cancelClick() {
       
      },
      saveClick(){
            this.tableList.allcol = this.tableList.tableColumn.filter(ele => !ele.default).map(ele => ele.label);
            this.searchOptions = []
            for (let i = 0; i < this.tableList.tableColumn.length; i++) {
                const label = this.tableList.tableColumn[i].label
                const value = this.tableList.tableColumn[i].prop
                this.searchOptions.push({ value: value, label: label })
            }
        },
        setColumnVisible(showCol) {
            return this.tableColumn.map(ele => {
                return {
                    ...ele,
                    isShowColumn: showCol.includes(ele.label)
                }
            })
        },
        selTableCol(val) {
            this.showcol = val;
            this.tableList.tableColumn = this.setColumnVisible(val);
        },
        // 请求数据
        async getData() {
            this.loading = true
            await getFollowRecordList({
                search_map: this.search_map,
                page: this.pagerOptions.currPage,
                pageSize: this.pagerOptions.pageSize
            })
                .then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        if (res.data.list && res.data.list.length > 0) {
                            const list = res.data.list.map((item) => {
                                let contact_name = ""
                                let contact_phone = ""
                                let contact_id = 0
                                let contact_wechat = ""
                                let contact_email = ""
                                let position = ""
                                if (item.contacts.length !== 0) {
                                    for (let i = 0; i < item.contacts.length; i++) {
                                        if (item.contacts[i].is_first) {
                                            contact_name = item.contacts[i].name
                                            contact_phone = item.contacts[i].phone
                                            contact_id = item.contacts[i].id
                                            contact_wechat = item.contacts[i].wechat
                                            contact_email = item.contacts[i].email
                                            position = item.contacts[i].position
                                        }
                                    }
                                }
                                return {
                                    ...item,
                                    contact_name: contact_name,
                                    contact_phone: contact_phone,
                                    client_level: item.client_level.name,
                                    client_status: item.client_status.name,
                                    contact_id: contact_id,
                                    member_name: item.member.username,
                                    contact_wechat: contact_wechat,
                                    contact_email: contact_email,
                                    position: position
                                }
                            })
                            this.tableList.tableInfomation = list || []
                            this.tableTwoList.tableInfomation = []
                            this.pagerOptions.totalCount = res.data.count
                        } else {
                            this.tableList.tableInfomation = []
                        }
                    } else {
                        this.tableList.tableInfomation = []
                        this.tableTwoList.tableInfomation = []
                    }
                    this.loading = false
                })
                .catch((err) => {
                    console.log(err)
                    this.tableList.tableInfomation = []
                    this.loading = false
                })
        },
        tabsClick(tab) {
            console.log(tab.name)
            if (tab.name === "first") {
                this.is_public = true
            } else {
                this.is_public = false
            }
            this.search_map = {
                is_public: this.is_public
            }
            this.pagerOptions.currPage = 1
            this.getData()
        },
        // 搜索
        onFilterSearch(searchText) {
            this.search_map = {
                is_public: this.is_public,
                name: searchText
            }
            this.pagerOptions.currPage = 1
            this.getData()
        },
        // 放弃
        cancelClick() {

      },
     
        },
        saveClick() {

        },

    }
  }
  </script>
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
  ::v-deep {
<style lang="scss" scoped>
::v-deep {
    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
      padding-left: 25px;
        padding-left: 25px;
    }

    .el-tabs__item {
      padding: 0 25px;
      height: 45px;
        padding: 0 25px;
        height: 45px;
    }
  }
  
  .custom-manage{
}

.custom-manage {
    height: 100%;
    overflow: hidden;
    .filter{
      height: 80px;
      display: flex;
      align-items: center;
      padding: 0 20px 0 20px;
      &-card{

    .filter {
        height: 80px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 20px;
        flex: 1;
        border-radius: 12px;
        background-color: #fff;
      }
    }
    .body{
      box-sizing: border-box;
      padding: 10px 20px;
      border-radius: 12px;
      height: calc(100% - 139px);
      .body-card {
        background-color: #fff;
        border-radius: 12px;
        height: 100%;
        overflow: hidden;
      }
      .list-view {
        height: calc(100% - 60px);
        overflow: hidden;
      }
      .btn-pager {
        display: flex;
        margin-top: 10px;
        .page {
          margin-left: auto;
        padding: 0 20px 0 20px;

        &-card {
            height: 80px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 10px 20px;
            flex: 1;
            border-radius: 12px;
            background-color: #fff;
        }
      }
    }
  }
  </style>

    .body {
        box-sizing: border-box;
        padding: 10px 10px;
        border-radius: 12px;
        height: calc(100% - 139px - 10px);
        width: calc(100% - 20px);
        margin: 0 auto;
        margin-top: 10px;
        overflow: hidden;
        background: #fff;

        .body-l {
            background-color: #fff;
            border-radius: 12px;
            height: calc(100% - 180px - 20px);
            width: calc(100% - 420px);
            float: left;
            overflow: hidden;
            padding: 10px 10px;

            .form-box {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .form-box {
                width: 100%;
                height: 180px;
                overflow: hidden;

                .form-item {
                    width: calc(33% - 10px);
                    margin-right: 15px;
                    float: left;

                    &:nth-of-type(3n) {
                        margin-right: 0;
                    }
                }
            }

            .list-view {
                height: calc(100% - 0px);
                overflow: hidden;
            }
        }

        .body-r {
            background-color: #67a0ff;
            color: #333;
            font-size: 28px;
            height: calc(100% - 40px);
            width: 340px;
            float: right;
            padding: 20px 10px;

            p {
                font-size: 32px;
                color: #fff;
            }
        }

        .btn-pager {
            display: flex;
            margin-top: 10px;

            .page {
                margin-left: auto;
            }
        }
    }

    .body-two {
        .body-two-t {
            text-align: center;
            width: 100%;
            font-size: 16px;
            line-height: 30px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .form-box {
            width: 100%;
            height: calc(100% - 40px);
            overflow: hidden;
        }

        .form-box-t {
            width: 100%;
            height: 60px;
            overflow: hidden;

            .form-item {
                width: calc(16% - 5px);
                margin-right: 10px;
                float: left;

                &:nth-of-type(6n) {
                    margin-right: 0;
                }
            }
        }

        .list-view {
            max-height: calc(100% - 90px - 10px);
            overflow: hidden;
        }
        .form-box-b {
            width: 100%;
            height: 60px;
            margin-top:10px;
            overflow: hidden;
            .form-item-two{
                width:160px;
                float:left;
            }

            .form-item {
                width: calc(10% - 5px);
                margin-right: 10px;
                float: left;

                &:nth-of-type(10n) {
                    margin-right: 0;
                }
            }
        }
    }
}
</style>
  

 src/views/productManage/silkRegisterForm/index.vue

@@ -171,9 +171,9 @@
    },
    // 新建
    addBtnClick() {
      this.editConfig.title = "新建"
      this.editConfig.infomation = { contact_name:"",sales_leads_name:"",sale_chance_name:""}
      this.editConfig.visible = true
      this.$router.push({
        path:"/productManage/silkRegisterForm/addPage?activeName=first",
      });
    },
     // 打印
     printClick(){