From 5db418e1ae2686c770ee5c3b7dd7e6ad6f3aff9a Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Thu, 30 May 2024 08:23:44 +0800
Subject: [PATCH] md

---
 src/components/XdSteps/index.vue              | 336 ++++++++++++++
 .../emis/emisTmsTransPlan/planDtlPanel.vue    | 426 ++++++++++++++++++
 2 files changed, 762 insertions(+)
 create mode 100644 src/components/XdSteps/index.vue
 create mode 100644 src/views/emis/emisTmsTransPlan/planDtlPanel.vue

diff --git a/src/components/XdSteps/index.vue b/src/components/XdSteps/index.vue
new file mode 100644
index 00000000..5d3326ca
--- /dev/null
+++ b/src/components/XdSteps/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="m-steps-area" :style="`width: ${totalWidth}px;`">
+    <div class="m-steps">
+      <div :class="['m-steps-item',
+          {
+            'finished': current > n,
+            'process': current === n && n !== totalSteps,
+            'last-process': current === totalSteps && n === totalSteps,
+            'middle-wait': current < n && n !== totalSteps,
+            'last-wait': current < n && n === totalSteps
+          }
+        ]"
+        v-for="n in totalSteps"
+        :key="n">
+        <div class="m-info-wrap" @click="onChange(n)">
+          <div class="m-steps-icon">
+            <span class="u-icon" v-if="current<=n">{{ n }}</span>
+            <svg class="u-icon" v-else viewBox="64 64 896 896" data-icon="check" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg>
+          </div>
+          <div class="m-steps-content">
+            <div class="u-steps-title">{{ stepsLabel[n-1] }}</div>
+            <div class="u-steps-description" v-show="stepsDesc[n-1]" :style="`max-width: ${descMaxWidth}px;`">{{ stepsDesc[n-1] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Steps',
+  props: {
+    stepsLabel: { // 步骤标题数组
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    stepsDesc: { // 步骤描述数组
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    totalSteps: { // 步骤总数
+      type: Number,
+      default: 3
+    },
+    currentStep: { // 当前选中的步骤
+      type: Number,
+      default: 1
+    },
+    totalWidth: { // 步骤条总宽度
+      type: Number,
+      default: 900
+    },
+    descMaxWidth: { // 描述文本最大宽度
+      type: Number,
+      default: 140
+    }
+  },
+  data () {
+    return {
+      // 若当前选中步骤超过总步骤数，则默认选择步骤1
+      current: this.currentStep > this.totalSteps ? 1 : this.currentStep
+    }
+  },
+  methods: {
+    onChange (index) { // 点击切换选择步骤
+      // e.stopPropagation()
+      console.log('index:', index)
+      if (this.current !== index) {
+        this.current = index
+        this.$emit('change', index)
+      }
+    }
+  }
+}
+</script>
+<!-- // #1890FF: #1890FF; -->
+<style lang="scss" scoped>
+.m-steps-area {
+  margin: 0px auto;
+}
+
+.m-steps-area .m-steps {
+  padding: 30px 0;
+  display: flex;
+}
+
+.m-steps-area .m-steps .m-steps-item {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 32px;
+}
+
+.m-steps-area .m-steps .m-steps-item:not(:last-child) {
+  margin-right: 16px;
+  flex: 1;
+}
+
+.m-steps-area .m-steps .m-steps-item .m-info-wrap {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-icon {
+  display: inline-block;
+  margin-right: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  text-align: center;
+}
+
+.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content .u-steps-title {
+  position: relative;
+  display: inline-block;
+  padding-right: 16px;
+}
+
+.m-steps-area .m-steps .m-steps-item .m-info-wrap .m-steps-content .u-steps-description {
+  font-size: 14px;
+  word-wrap: break-word;
+}
+
+.m-steps-area .m-steps .u-tail {
+  background: #e8e8e8;
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 3000px;
+  height: 1px;
+  content: "";
+}
+
+.m-steps-area .m-steps .finished:hover .m-steps-content .u-steps-title {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .finished:hover .m-steps-content .u-steps-description {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .finished .m-steps-icon {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-color: #1890FF;
+}
+
+.m-steps-area .m-steps .finished .m-steps-icon .u-icon {
+  fill: #1890FF;
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-top: 8px;
+}
+
+.m-steps-area .m-steps .finished .m-steps-content {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .finished .m-steps-content .u-steps-title {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .finished .m-steps-content .u-steps-title:after {
+  background: #e8e8e8;
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 3000px;
+  height: 1px;
+  content: "";
+  background: #1890FF;
+}
+
+.m-steps-area .m-steps .finished .m-steps-content .u-steps-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.m-steps-area .m-steps .process .m-steps-icon {
+  background: #1890FF;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-color: #1890FF;
+}
+
+.m-steps-area .m-steps .process .m-steps-icon .u-icon {
+  color: #fff;
+}
+
+.m-steps-area .m-steps .process .m-steps-content {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .process .m-steps-content .u-steps-title {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.m-steps-area .m-steps .process .m-steps-content .u-steps-title:after {
+  background: #e8e8e8;
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 3000px;
+  height: 1px;
+  content: "";
+}
+
+.m-steps-area .m-steps .process .m-steps-content .u-steps-description {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .last-process .m-steps-icon {
+  background: #1890FF;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-color: #1890FF;
+}
+
+.m-steps-area .m-steps .last-process .m-steps-icon .u-icon {
+  color: #fff;
+}
+
+.m-steps-area .m-steps .last-process .m-steps-content {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .last-process .m-steps-content .u-steps-title {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.m-steps-area .m-steps .last-process .m-steps-content .u-steps-description {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .middle-wait:hover .m-steps-icon {
+  border: 1px solid #1890FF;
+}
+
+.m-steps-area .m-steps .middle-wait:hover .m-steps-icon .u-icon {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .middle-wait:hover .m-steps-content .u-steps-title {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .middle-wait:hover .m-steps-content .u-steps-description {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-icon {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-icon .u-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-content {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-title {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-title:after {
+  background: #e8e8e8;
+  position: absolute;
+  top: 16px;
+  left: 100%;
+  display: block;
+  width: 3000px;
+  height: 1px;
+  content: "";
+}
+
+.m-steps-area .m-steps .middle-wait .m-steps-content .u-steps-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.m-steps-area .m-steps .last-wait {
+  margin-right: 0;
+}
+
+.m-steps-area .m-steps .last-wait:hover .m-steps-icon {
+  border: 1px solid #1890FF;
+}
+
+.m-steps-area .m-steps .last-wait:hover .m-steps-icon .u-icon {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .last-wait:hover .m-steps-content .u-steps-title {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .last-wait:hover .m-steps-content .u-steps-description {
+  color: #1890FF;
+}
+
+.m-steps-area .m-steps .last-wait .m-steps-icon {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.m-steps-area .m-steps .last-wait .m-steps-icon .u-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+.m-steps-area .m-steps .last-wait .m-steps-content {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.m-steps-area .m-steps .last-wait .m-steps-content .u-steps-title {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.m-steps-area .m-steps .last-wait .m-steps-content .u-steps-description {
+  color: rgba(0, 0, 0, 0.45);
+}
+
+</style>
diff --git a/src/views/emis/emisTmsTransPlan/planDtlPanel.vue b/src/views/emis/emisTmsTransPlan/planDtlPanel.vue
new file mode 100644
index 00000000..019a82d9
--- /dev/null
+++ b/src/views/emis/emisTmsTransPlan/planDtlPanel.vue
@@ -0,0 +1,426 @@
+<template>
+  <div >
+    <el-row :gutter="5" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          @click="handleAdd"
+        >新增节点</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table size="mini" v-loading="loading" :data="emisTmsTransPlanDtlList" border stripe @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" align="center" prop="orderNum" width="60" />
+      <el-table-column :label="$t('节点名称')" align="center" prop="stepName" width="100" >
+        <template slot-scope="scope">
+            <div  class="link-type" @click="handleUpdate(scope.row)">{{scope.row.stepName}}</div>
+         </template>
+      </el-table-column>
+
+      <!-- <el-table-column label="起始网点" align="center" prop="startSite" min-width="100" /> -->
+      <el-table-column label="起始网点" align="center" prop="startSiteName" min-width="100" :show-overflow-tooltip="true" />
+
+      <!-- <el-table-column label="目的网点" align="center" prop="destSite" min-width="100" /> -->
+      <el-table-column label="目的网点" align="center" prop="destSiteName" width="100" />
+      <el-table-column label="运输方式" align="center" prop="transType" width="80" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.emis_biz_shipping_method" :value="scope.row.transType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="运输时效(天)" align="center" prop="estCostDay" width="80" />
+
+    </el-table>
+
+                <!-- @click="handleDelete(scope.row)" -->
+    <!-- 添加或修改费用计算表达式对话框 -->
+    <el-dialog :title="title"  :visible.sync="open" width="50%" :close-on-click-modal="false" v-dialogDrag  append-to-body>
+      <el-row :gutter="0">
+        <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="80px">
+          <el-col :span="24">
+            <el-form-item label="节点名称" prop="stepName">
+              <el-input v-model="form.stepName" placeholder="请输入节点名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="起始网点" prop="startSite">
+              <el-button type="primary"  @click="handleSelectSite">选择网点</el-button>
+              <el-button
+                      plain
+                      type="primary"
+                      size="mini"
+                      @click="handleAddSite"
+                    >追加网点</el-button>
+              <el-input v-model="form.startSiteName" type="textarea" rows="5" disabled placeholder="站点列表" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="目的网点" prop="destSite">
+              <EmisSiteSimplePicker1  v-model="form.destSite" :placeholder="$t('目的网点')"   isInitiated="true" @onChange="onDestSiteChange"></EmisSiteSimplePicker1>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12">
+            <el-form-item label="运输方式" prop="transType">
+              <el-select v-model="form.transType" placeholder="运输方式" clearable filterable>
+                  <el-option
+                    v-for="item in dict.type.emis_biz_shipping_method"
+                    v-bind:key="item.value"
+                    v-bind:label="item.label"
+                    v-bind:value="item.value"
+                  />
+                </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="预估时效" prop="estCostDay" label-width="110px">
+              <el-input v-model="form.estCostDay" placeholder="" >
+                <span slot="suffix">(天)</span>
+              </el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="顺序号" prop="orderNum">
+              <el-input v-model="form.orderNum" placeholder="请输入顺序号" />
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="8">
+            <el-form-item label="状态" prop="status">
+              <el-input v-model="form.status" placeholder="请输入状态" />
+            </el-form-item>
+          </el-col> -->
+        </el-form>
+      </el-row>
+      <div slot="footer" class="dialog-footer" style="text-align: center;margin-bottom: 10px;">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="titleSiteSelectTreeForm" :visible.sync="openSiteSelectTreeForm" width="40%" :destroy-on-close="true" v-dialogDrag append-to-body>
+        <EmisSiteSelectTreePicker :isAddSite="isAddSite" :selectSiteCode="form.startSite" :selectSiteName="form.startSiteName"  @on-changed="onSelectSiteTreeCheckChange" @on-cancel="onCancelSelectSiteTreeForm"></EmisSiteSelectTreePicker>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { listEmisTmsTransPlanDtl, getEmisTmsTransPlanDtl, delEmisTmsTransPlanDtl, addEmisTmsTransPlanDtl, updateEmisTmsTransPlanDtl } from "@/api/emis/emisTmsTransPlanDtl";
+import EmisSiteSimplePicker0 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
+import EmisSiteSimplePicker1 from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
+import EmisSiteSelectTreePicker from '@/views/emis/EmisBaseTools/EmisSiteSelectTreePicker.vue';
+
+export default {
+  name: "PlanDtlPanel",
+  components: {
+    EmisSiteSimplePicker0,
+    EmisSiteSimplePicker1,
+    EmisSiteSelectTreePicker
+  },
+  dicts: ['emis_biz_shipping_method'],
+  props:{
+    value:{
+      type:Array,
+    },
+    planId:{
+        type:Number
+    },
+    isCopy:{
+      type:Boolean
+    }
+  },
+  watch: {
+      value(newVal) {
+      },
+      planId(){
+        this.initData();
+      }
+    },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      // 总条数
+      total: 0,
+      // 费用计算表达式表格数据
+      emisTmsTransPlanDtlList: [],
+
+      isAddSite:false,
+      titleSiteSelectTreeForm:'',
+      openSiteSelectTreeForm:false,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      currentRow:{},
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+
+      }
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.reset();
+       if(this.planId!=null){
+          this.getList();
+       }else{
+          this.emisTmsTransPlanDtlList=[];
+       }
+   },
+   // 选择网点
+   handleSelectSite(){
+      this.isAddSite=false;
+      // console.log(this.useSiteCode)
+      this.titleSiteSelectTreeForm='选择网点';
+      this.openSiteSelectTreeForm=true;
+    },
+    // 追加网点
+    handleAddSite(){
+      this.isAddSite=true;
+      this.titleSiteSelectTreeForm='追加网点';
+      this.openSiteSelectTreeForm=true;
+    },
+    onSelectSiteTreeCheckChange(item){
+        this.openSiteSelectTreeForm=false;
+        this.form.startSiteName=item.selectSiteNameStr;
+        this.form.startSite=item.selectSiteCodeStr;
+        console.log(item)
+    },
+    onCancelSelectSiteTreeForm(){
+      this.openSiteSelectTreeForm=false;
+    },
+    onDestSiteChange(item){
+      this.form.destSiteName=item.siteName;
+    },
+    getList() {
+      let queryParams={
+        planId:this.planId,
+      }
+      console.log("======>");
+      console.log(queryParams);
+
+      listEmisTmsTransPlanDtl(queryParams).then(response => {
+        this.emisTmsTransPlanDtlList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        this.onChage();
+      });
+    },
+    onChage(){
+      this.$emit("input", this.emisTmsTransPlanDtlList);
+      this.$emit("onChange",this.emisTmsTransPlanDtlList);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        planId: this.planId,
+        stepName: null,
+        startSite: null,
+        startSiteName: null,
+        destSite: null,
+        destSiteName: null,
+        transType: null,
+        estCostDay: null,
+        orderNum: null,
+        status: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+      this.currentRow = selection[0];
+
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.open = true;
+      this.title = "新增节点";
+      const orderNum=this.emisTmsTransPlanDtlList.length+1;
+      this.form.orderNum=orderNum;
+      if(orderNum>1){
+        // 获取上一条数据
+        const [lastData]= this.emisTmsTransPlanDtlList.slice(-1);
+        console.log(lastData);
+        this.form.startSiteCode=lastData.destSiteCode;
+        this.form.destSiteCode=null;
+        this.form.transType=lastData.transType;
+        this.form.estCostDay=1;
+      }
+
+    },
+    handleCopy(row){
+      this.reset();
+      this.open = true;
+      this.title = "复制节点";
+      console.log(row)
+      const orderNum=this.emisTmsTransPlanDtlList.length+1;
+      if(orderNum>1){
+        // 获取上一条数据
+        let newData =Object.assign({}, row);
+        console.log(newData)
+        this.form=newData;
+        this.form.orderNum=orderNum;
+        // this.form.startWeight=newData.endWeight;
+        // this.form.endWeight='';
+        // this.form.initialWeight=0;
+        // this.form.additionalWeight=0;
+        // this.form.calculateExpression=newData.calculateExpression;
+      }
+
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+
+      if(this.quoteId != null && !this.isCopy){
+        this.handleUpdateByQuoteId(row);
+      }else{
+        this.currentRow = row;
+        this.form = row;
+      }
+
+      this.open = true;
+      this.title = "修改节点";
+    },
+    handleUpdateByQuoteId(row){
+      this.loading = true;
+      getEmisTmsTransPlanDtl(row.id).then(response => {
+        this.form = response.data;
+        this.loading = false;
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // && !this.isCopy
+          if(this.planId != null ){
+            this.submitFormByPlanId()
+          }else{
+            this.submitFormByNew();
+          }
+
+          this.reset();
+          this.open = false;
+        }
+      });
+    },
+    submitFormByPlanId(){
+        if (this.form.id != null) {
+          console.log("=======1");
+          console.log(this.form);
+
+          updateEmisTmsTransPlanDtl(this.form).then(response => {
+            // this.$modal.msgSuccess("修改成功");
+            // this.$emit("on-changed");
+            this.getList();
+          });
+        } else {
+          console.log("=======2");
+          console.log(this.form);
+
+          addEmisTmsTransPlanDtl(this.form).then(response => {
+              // this.$modal.msgSuccess("添加成功");
+              // this.$emit("on-changed");
+              this.getList();
+          });
+        }
+    },
+    submitFormByNew(){
+      // 新增的需要带回数据
+      if (this.form.id == null) {
+          let newItem = Object.assign({}, this.form);
+          newItem.id=-1;
+          this.emisTmsTransPlanDtlList.push(newItem);
+      }
+      this.onChage();
+    },
+    /** 删除按钮操作 */
+    handleDelete(row,index,list) {
+      if(this.quoteId != null && !this.isCopy){
+        this.handleDeletePlanId(row);
+      }else{
+        this.handleDeleteByNew(row,index,list);
+      }
+    },
+    // 从数据库中删除
+    handleDeletePlanId(row) {
+        const ids = row.id || this.ids;
+        this.$modal.confirm('是否确认删除').then(function() {
+          return delEmisTmsTransPlanDtl(ids);
+        }).then(() => {
+          this.getList();
+          // this.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    handleDeleteByNew(row,index,list){
+      list.splice(index, 1);
+    }
+
+  }
+};
+</script>
+
+<style scoped>
+  .el-divider{
+    margin-top: 0px;
+    background: 0 0;
+    border-top: 1px solid #E6EBF5;
+  }
+  .el-divider__text {
+    color: #0955ee;
+    cursor: pointer;
+  }
+
+  .el-alert__title {
+    color: black!important;;
+  }
+
+  .el-alert__description {
+    color: black!important;;
+  }
+</style>