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

haoxuan

2024-04-07 9284dbc97513286ac3f16782a5088cc838682897

 src/views/productManage/silkRegisterForm/addPage.vue

@@ -1,260 +1,796 @@
<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>
      </div>
        <template v-if="activeName == 'first'">
            <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="cancelClickOne">放弃</el-button>
                            <el-button size="small" type="primary" :loading="isAddloading"  @click="saveClickOne('form')">保存</el-button>
                        </template>
                    </CommonSearch>
                </div>
            </div>

            <div class="body">
                <div class="body-l">
                    <el-form ref="form" class="form-box" :model="form" :rules="rules" label-position="left"
                        label-width="80px">
                        <el-form-item label="编号" prop="number" class="form-item">
                            <el-input v-model="form.number" placeholder="请输入">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="落丝时间" prop="finishDate" class="form-item">
                            <el-date-picker v-model="form.finishDate" value-format="yyyy-MM-dd" type="date"
                                placeholder="选择日期" class="select-width">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="庄口" prop="market" class="form-item">
                            <el-select v-model="form.market" placeholder="请选择" class="select-width">
                                <el-option v-for="item in marketList" :key="item.ID" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车间" prop="name" class="form-item">
                            <el-select v-model="form.name" placeholder="请选择" class="select-width">
                                <el-option v-for="item in nameList" :key="item.ID" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="规格" prop="spec" class="form-item">
                            <el-select v-model="form.spec" placeholder="请选择" class="select-width">
                                <el-option v-for="item in specList" :key="item.ID" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="form.spec" placeholder="请输入">
                            </el-input> -->
                        </el-form-item>
                        <el-form-item label="组别" prop="workshopGroup" class="form-item">
                            <el-select v-model="form.workshopGroup" placeholder="请选择" class="select-width">
                                <el-option v-for="item in workshopGroupList" :key="item.ID" :label="item.name"
                                    :value="item.ID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="回数" prop='circle' class="form-item">
                            <el-row>
                                <el-col :span="11">
                                    <el-form-item label="" @input="inputStart" label-width="0" prop="startCircle" class="select-width">
                                        <el-input  v-model.number="form.startCircle" placeholder="请输入" show-word-limit
                                        class="select-width"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" style="margin:0 auto;text-align:center;">-</el-col>
                                <el-col :span="11">
                                    <el-form-item label="" label-width="0" prop="endCircle" class="select-width">

                                        <el-input v-model.number="form.endCircle" @input="inputStart" placeholder="请输入" show-word-limit
                                            class="select-width"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="车号" prop="position" class="form-item">
                            <el-input v-model="form.position" 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> -->
                        <!-- 修改为输入 -->
                        <CommonFormTableView
                        ref="commonFormTableView"
                        :detail-enter="isView ? true : false"
                        :selectBox="false"
                        :detailEnter="true"
                        :show-summary="showSummary"
                        :product-table-list="tableList"
                        @inputContent="inputContent"
                        @addProductClick="addProductClick"
                        ></CommonFormTableView>
                    </div>
                </div>
                <div class="body-r">
                    纤度：
                    <p>{{ form.sumFineness }}</p>
                </div>
            </div>
        </template>
        <template v-if="activeName == 'second'">
            <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="name" class="form-item">
                            <el-select v-model="form.name" placeholder="请选择" class="select-width">
                                <el-option v-for="item in nameList" :key="item.ID" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="组别" prop="workshopGroup" class="form-item">
                            <el-select v-model="form.workshopGroup" placeholder="请选择" class="select-width">
                                <el-option v-for="item in workshopGroupList" :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="spec" class="form-item">
                            <el-select v-model="form.spec" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in specList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="form.spec" 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>
        </template>
    </div>
  </template>
</template>
  
  <script>
 import { getFollowRecordList } from "@/api/productManage/silkRegisterForm.js"
  import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
  export default {
<script>
import { getRegisterList,saveRegister,getDictList,getWorkshopManageList,getRegisterDetails } from "@/api/productManage/silkRegisterForm.js"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
    name: "silkRegisterAddPage",
    props: {},
    mixins: [pageMixin],
    components: {
        CommonFormTableView,
    },
    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 {
            loading: false,
            activeName: "first",
            searchOptions: [],
            search_map: {},
            is_public: true,
            marketList:[], //庄口
            nameList:[], //车间
            workshopGroupList:[], //组别
            deliveryTypeList: [],
            specList:[], //规格
            form: {
                number:'',
                finishDate:'',
                market:'',
                name:'', 
                spec:'',
                workshopGroup:'',
                circle:'',
                startCircle:'',
                endCircle:'',
                position:'',
            },
            rules: {
                number: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
                finishDate: [
                    { required: true, message: "请选择", trigger: ["change", 'blur'] },
                ],
                // 车间 应该true
                name: [
                    { required: true, message: "请选择", trigger: ["change", 'blur'] },
                ],
                spec: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
                // 组别 应该true
                workshopGroup: [
                    { required: false, message: "请选择", trigger: ["change", 'blur'] },
                ],
                circle: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
                startCircle: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
                endCircle: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
                position: [
                    { required: true, message: "请填写", trigger: ["change", 'blur'] },
                ],
            },
            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 },
                ],
            },
            // 新增纤度登记表
            isAddloading:false,
            isView: true,
            showSummary: {
                show: true,
                total: true,
                totalLabel:'合计:',
                sumProp: ["fineness", "quantity",'sum'],
                mergeNumber: 0
            },
            productId: 1,
            tableList: {
                allcol: [],
                headerColor:'red',
                showcol: ['车号', '纤度值', '数量', '纤度合计'],
                tableData: [
                    {
                        productId:1,
                        position: '',
                        fineness: 0,
                        quantity: 0,
                        sum: "",
                    }
                ],
                tableColumn:[
                    { label: "车号", prop: "position", input: true }, // 客户名称
                    { label: "纤度值", prop: "fineness", inputNumber: true, isRequird: true, }, // 销售负责人
                    { label: "数量", prop: "quantity", inputNumber: true , isRequird: true,}, // 重要级别
                    { label: "纤度合计", prop: "sum", inputNumber: true}, // 下次回访日期
                ],
            },
            tableData:[],
            registerId:'',
        }
    },
    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.registerId= query.id ? query.id : "";
        }
        this.getSelectDataList()
        this.search_map = {
            is_public: this.is_public
        }
        this.getDetailsData()
        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
                  }
        getDetailsData(){
            if(this.registerId){
                getRegisterDetails({ id: this.registerId }).then((response) => {
                    if (response.code === 200) {
                    let config=JSON.parse(JSON.stringify(response.data?response.data:{}));
                    this.form=config;
                    this.tableList.tableData=config.finenessList?config.finenessList:[]
                    this.tableData=config.finenessList?config.finenessList:[]
                    } 
                })
                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
          })
      },
      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(){
            
        },
        getSelectDataList(){
            //车间
            getDictList({
                dictType: 1,
            }).then((res) => {
                    if (res.code == 200) {
                        this.nameList=res.data||[]
                    }
                })
                 //规格
                 getDictList({
                dictType: 3,
            }).then((res) => {
                    if (res.code == 200) {
                        this.specList=res.data||[]
                    }
                })
                //组别
                getWorkshopManageList().then((res) => {
                    if (res.code == 200) {
                        this.workshopGroupList=res.data||[]
                    }
                })
                //庄口
                getDictList({
                dictType: 0,
            }).then((res) => {
                    if (res.code == 200) {
                        this.marketList=res.data||[]
                    }
                })
        },
        inputStart(){
            this.form.circle=this.form.startCircle+'-'+this.form.endCircle
        }, 
        // 产品新增
        addProductClick() {
            this.productId++
            this.tableData.push({
                productId: this.productId,
                position: '',
                        fineness: 0,
                        quantity: 0,
                        sum: "",
            })
            this.tableList.tableData=this.tableData
            this.showSummary.show = true
        },
         // 产品列表输入
        inputContent(val, prop, row) {
            this.productId = row.productId
            this.tableData.map((item) => {
                if (item.productId === row.productId) {
                    item[prop] = val
                }
            })
        }, 
            // 请求数据
        async getData() {
            this.loading = true
            await getRegisterList({
                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.tableTwoList.tableInfomation =list|| []
                            this.pagerOptions.totalCount = res.data.count
                        } else {
                            this.tableTwoList.tableInfomation = []
                        }
                    } else {
                        this.tableTwoList.tableInfomation = []
                    }
                    this.loading = false
                })
                .catch((err) => {
                    console.log(err)
                    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()
        },
        // 纤度登记表
        // 放弃
        cancelClickOne() {
            if(this.activeName == 'first'){
                this.form={
                    number:'',
                    finishDate:'',
                    market:'',
                    name:'', 
                    spec:'',
                    workshopGroup:'',
                    circle:'',
                    startCircle:'',
                    endCircle:'',
                    position:'',
                }
                this.$refs.form.resetFields();
                this.productId=1
                this.tableList.tableData=[{
                    productId:1,
                        position: '',
                        fineness: 0,
                        quantity: 0,
                        sum: "",
                }]
            }
        },
        // 保存
        saveClickOne(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let form = JSON.parse(JSON.stringify(this.form));
                    delete form.circle
                    let finenessList= JSON.parse(JSON.stringify(this.tableList.tableData));
                    for(let i in finenessList){
                        delete finenessList[i].productId
                    }
                    let params = {
                        finenessList:finenessList,
                        ...form
                    }
                    this.isAddloading=true
                    saveRegister(params).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                message: "保存成功！",
                                type: "success",
                            });
                        }
                        this.isAddloading=false
                    }).catch(() => {
                        setTimeout(() => {
                            this.isAddloading = false;
                            }, 3000);
                    })
                } else {
                    console.log('error submit!!');
                    
                    return false;
                }
            });
        },
        // 放弃
        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 - 20px);
        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;
                    }
                    .select-width{
                        width:100%;
                    }
                }
            }

            .list-view {
                height: calc(100% - 0px);
                min-height:200px;
                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>