epx-frame 3.5.0-shpgy.1

package/src/frame/packages/import/Import.vue

@@ -0,0 +1,832 @@
+<template>
+  <div class="import-container" @click="optionListVisible=false">
+    <el-card class="box-card">
+      <el-steps class="steps" :active="stepIndex" align-center>
+        <el-step :title="$t('uploading data files')" icon=""></el-step>
+        <el-step :title="$t('matching import fields')" icon=""></el-step>
+        <el-step :title="$t('checking data validity')"></el-step>
+        <el-step :title="$t('import is complete')"></el-step>
+      </el-steps>
+      <!-- 第一步 -->
+      <div v-if="stepIndex===1" class="step1">
+        <el-upload
+          class="upload"
+          drag
+          :limit="1"
+          :on-exceed="handleExceed"
+          accept=".xlsx,.xls,.csv,.pdf"
+          :http-request="upload"
+          :file-list="fileList"
+          :on-remove="handleRemove"
+          >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">
+            <div>{{$t('Drag the file here, or')}}<em>{{$t('Click on the upload')}}</em></div>
+            <div class="el-upload__tip" slot="tip">{{$t('Only Excel is supported. You can select fields below to generate data file templates')}}</div>
+          </div>
+        </el-upload>
+        <div class="operate">
+          <el-button type="primary" @click="uploadExcel" :loading="isRequesting">{{$t('next step')}}</el-button>
+        </div>
+      </div>
+      <!-- 第二步 -->
+       <div v-if="stepIndex===2" class="step2">
+         <div>
+           <label>{{$t('import mode')}}：</label>
+           <el-radio-group  v-model="importMode">
+            <el-radio label="add">{{$t('append mode')}}</el-radio>
+            <el-radio label="update">{{$t('renewal model')}}</el-radio>
+          </el-radio-group>
+         </div>
+         <div class="required-check-flag">
+           <label>{{$t('Mandatory field check')}}：</label>
+           <el-radio-group  v-model="requiredCheckFlag">
+            <el-radio :label="true">{{$t('yes')}}</el-radio>
+            <el-radio :label="false">{{$t('no')}}</el-radio>
+          </el-radio-group>
+         </div>
+        <div class="line"></div>
+        <div class="opera">
+          <span>{{$t('Import Data Matching')}}<span style="font-size:12px;color:#999">{{$t('(Hint: Please select system fields to match imported data columns)')}}</span></span>
+          <div class="opera-button">
+            <span class="clear-match__all" @click="clearAllMatch"> <i class="el-icon-delete-solid"></i>{{$t('clear')}}</span>
+            <span class="auto-match" @click="autoMatch"> <i class="el-icon-s-promotion"></i>{{$t('automatic matching field')}}</span>
+          </div>
+        </div>
+         <table class="match-table">
+           <tr>
+             <th>{{$t('word size')}}</th>
+             <th>{{$t('columns of data can be imported')}}</th>
+             <th>{{$t('system match field')}}</th>
+             <th>{{$t('operation')}}</th>
+           </tr>
+           <tr v-for="(item,index) in dataList" :key="index" >
+             <td>{{index+1}}</td>
+             <td>{{item}}</td>
+             <td v-if="selectList[index]" >
+                <el-input :style="{width: '220px'}" slot="reference" readonly :value="selectList[index].text" :placeholder="$t('please select')" suffix-icon="el-icon-arrow-down"  @click.native.stop="e=>selectOptionFn(index, e)"></el-input>
+             </td>
+             <td class="clear-match" @click="clearMatch(index)">{{$t('empty')}}</td>
+           </tr>
+         </table>
+          <div v-show="optionListVisible!==false" class="option-popover" ref="popover" :style="{height: '300px',overflow: 'auto'}">
+            <el-tree ref="tree" node-key="field" :data="optionList" :default-expanded-keys="[optionList[0].field]" accordion expand-on-click-node @node-click="data=>selectMatch(optionListVisible, data)">
+              <span class="custom-tree-node" :style="{color: data.type==='meta' && data.relationType==='1'? 'red': ''}" slot-scope="{  data }">{{ data.text }}</span>
+            </el-tree>
+          </div>
+        <div class="operate">
+          <el-button type="primary" @click="excelToSystem" :loading="isRequesting">{{$t('next step')}}</el-button>
+          <el-button @click="backUp">{{$t('return')}}</el-button>
+        </div>
+      </div>
+      <!-- 第三步 -->
+       <div v-if="stepIndex===3" class="step3">
+        <div v-if="errorLength>0">
+          <div class="noPass">
+            <i class="el-icon-warning"></i>
+            <span style="vertical-align:middle">{{$t('check data error')}}</span>
+          </div>
+          <div class="line"></div>
+          <el-tabs v-model="dataStatus">
+            <el-tab-pane :label="$t('invalid data')+errorLength+$t('strip')" name="invalid">
+              <div style="margin-bottom:10px;text-align:right">
+                <el-button type="primary" @click="exportErrorData">{{$t('exporting invalid data')}}</el-button>
+              </div>
+              <el-table
+                :data="invalidList"
+                :cell-style="columnStyle"
+                :header-cell-style="headeRowClass"
+                v-loading="loadingInvalidData"
+                style="width: 100%">
+                <el-table-column
+                fixed
+                  type="index"
+                  :label="$t('numerical order')"
+                  min-width="150px"
+                  >
+                  </el-table-column>
+                <el-table-column
+                  prop="DATA_ERROR"
+                  :label="$t('data problem')"
+                  min-width="150px"
+                  >
+                </el-table-column>
+                <el-table-column
+                  v-for="(item,index) in titleList"
+                  :key="index"
+                  :prop="item.value"
+                  :label="item.text"
+                  min-width="150px"
+                  show-overflow-tooltip
+                >
+                <template slot-scope="scope">
+                  {{scope.row[`${item.value}#`]||scope.row[item.value]}}
+                </template>
+                </el-table-column>
+               </el-table>
+               <div style="text-align:center;margin-top:10px">
+                 <el-pagination
+                  @size-change="handleSizeChange1"
+                  @current-change="handleCurrentChange1"
+                  :current-page="currentPage1"
+                  :page-sizes="[10, 20, 30]"
+                  :page-size="10"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="Number(errorLength)">
+                </el-pagination>
+               </div>
+          </el-tab-pane>
+          <el-tab-pane :label="$t('valid data') +total+ $t('strip')" name="valid">
+            <el-table
+                :data="validList"
+                :header-cell-style="headeRowClass"
+                v-loading="loadingvalidData"
+                style="width: 100%">
+                <el-table-column
+                  type="index"
+                  :label="$t('numerical order')"
+                  min-width="150px"
+                  >
+                  </el-table-column>
+                <el-table-column
+                v-for="(item,index) in titleList"
+                :key="index"
+                  :prop="item.value"
+                  :label="item.text"
+                  show-overflow-tooltip
+                  min-width="150px">
+                <template slot-scope="scope">
+                  {{scope.row[`${item.value}#`]||scope.row[item.value]}}
+                </template>
+                </el-table-column>
+               </el-table>
+               <div style="text-align:center;margin-top:10px">
+                 <el-pagination
+                  @size-change="handleSizeChange2"
+                  @current-change="handleCurrentChange2"
+                  :current-page="currentPage2"
+                  :page-sizes="[10, 20, 30]"
+                  :page-size="10"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total">
+                </el-pagination>
+               </div>
+          </el-tab-pane>
+        </el-tabs>
+        </div>
+        <div v-else>
+           <div class="pass">
+          {{$t('Data check passes total')}}{{total}}{{$t('strip data')}}
+        </div>
+        <div class="line"></div>
+        <el-table
+            :data="validList"
+            :header-cell-style="headeRowClass"
+             v-loading="loadingvalidData"
+            style="width: 100%">
+            <el-table-column
+              type="index"
+              :label="$t('numerical order')"
+              min-width="150px">
+              </el-table-column>
+            <el-table-column
+            v-for="(item,index) in titleList"
+            :key="index"
+              :prop="item.value"
+              :label="item.text"
+              min-width="150px">
+                <template slot-scope="scope">
+                  {{scope.row[`${item.value}#`]||scope.row[item.value]}}
+                </template>
+            </el-table-column>
+            </el-table>
+            <div style="text-align:center;margin-top:10px">
+              <el-pagination
+              @size-change="handleSizeChange2"
+              @current-change="handleCurrentChange2"
+              :current-page="currentPage2"
+              :page-sizes="[10, 20, 30]"
+              :page-size="10"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+            </div>
+        </div>
+        <div class="operate">
+          <el-button type="primary" v-if="errorLength===0" @click="autoImportData">{{$t('import data')}}</el-button>
+          <el-button type="primary" v-else @click="importValidData">{{$t('Only valid data is imported')}}</el-button>
+          <el-button @click="backUp">{{$t('return')}}</el-button>
+        </div>
+      </div>
+      <div v-if="stepIndex===4" class="step4" style="text-align:center">
+        <i class="success-icon el-icon-success"></i>
+        <div class="over">{{$t('Data import complete')}}</div>
+        <div>{{$t('A total of import')}}<span class="count">{{length}}</span>{{$t('strip data')}}</div>
+        <div class="operate">
+          <el-button type="primary"  @click="backPage">{{$t('Return data list')}}</el-button>
+        </div>
+      </div>
+    </el-card>
+
+  </div>
+</template>
+
+<script>
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-import',
+  mixins: [component],
+  data () {
+    return {
+      stepIndex: 1,
+      fileList: [],
+      importMode: 'add',
+      dataList: [],
+      selectList: [],
+      optionList: [],
+      requiredList: [],
+      titleList: [],
+      invalidList: [],
+      errorLength: '',
+      validList: [],
+      total: 0,
+      dataStatus: 'invalid',
+      length: 0,
+      currentPage1: 1,
+      currentPage2: 1,
+      pageSize1: 10,
+      pageSize2: 10,
+      requiredCheckFlag: true,
+      isRequesting: false,
+      loadingInvalidData: false,
+      loadingValidData: false,
+      optionListVisible: false
+    }
+  },
+  methods: {
+    getDefaultValue () {
+      const { fields = [] } = this.$configs
+      const defaultValue = {}
+      fields.forEach(item => {
+        if (typeof item === 'object' && item.value) {
+          // eslint-disable-next-line
+          const _this = this
+          const value = item.value.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              // eslint-disable-next-line no-eval
+              return eval(`_this.${key}`) || eval(`_this.$query.${key}`) || eval(`_this.$tab.${key}`) || eval(`_this.$route.query.${key}`) || ''
+            } catch (error) {
+              return item.value
+            }
+          })
+          defaultValue[item.attriName] = value
+        }
+      })
+      return defaultValue
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(this.$t('The current limit is 1 file, this time selected') + ` ${files.length}` + this.$t('files') + '，' + this.$t('total of chose') + `${files.length + fileList.length}` + this.$t('files') + '，' + this.$t('can delete and upload again'))
+    },
+    selectOptionFn (index, e) {
+      if (this.optionListVisible !== index) {
+        this.optionListVisible = index
+      } else {
+        this.optionListVisible = false
+      }
+      if (this.optionListVisible !== false) {
+        const elem = e.target.offsetParent
+        this.$nextTick(() => {
+          this.$refs.popover.style.top = elem.offsetTop + elem.offsetHeight + 'px'
+          this.$refs.popover.style.left = elem.offsetLeft + 'px'
+        })
+      }
+    },
+    upload ({ file }) {
+      this.fileList = [file]
+    },
+    uploadExcel () {
+      if (this.fileList.length === 0) {
+        this.$message.error(this.$t('please select the file first'))
+        return
+      }
+      const file = this.fileList[0]
+      if (this.isRequesting === true) return
+      this.isRequesting = true
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$post({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        UPLOAD_FILE_FIELD: 'importfile',
+        importfile: file,
+        uploadExcelFlag: '1',
+        ...params
+      }, {
+        method: 'post',
+        requestType: 'formData'
+      })
+        .then(data => {
+          const { file, header } = data
+          this.fileId = file.data.ID
+          this.isRequesting = false
+          this.dataList = []
+          this.selectList = []
+          header.forEach(item => {
+            if (item) {
+              this.dataList.push(item)
+            }
+          })
+          this.autoMatch()
+          // 第二步
+          this.stepIndex = 2
+        })
+        .catch(err => {
+          this.isRequesting = false
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    backUp () {
+      if (this.stepIndex === 2) {
+        this.stepIndex = 1
+        this.dataList = []
+      } else if (this.stepIndex === 3) {
+        this.stepIndex = 2
+        this.titleList = []
+      }
+    },
+    clearAllMatch () {
+      this.selectList.forEach((item, index) => {
+        this.$set(this.selectList, index, { id: '', text: '' })
+      })
+    },
+    autoMatch () {
+      for (const index in this.dataList) {
+        const text = this.dataList[index]
+        const selectItem = { text: '', value: '' }
+        const children = this.optionList[0].children || []
+        for (let i = 0; i < children.length; i++) {
+          const item = children[i]
+          if (item.text === text) {
+            selectItem.id = item.id
+            selectItem.text = item.text
+          }
+        }
+        this.$set(this.selectList, index, selectItem)
+      }
+    },
+    selectMatch (index, data) {
+      if (data.type === 'field') {
+        this.$set(this.selectList, index, data)
+        this.optionListVisible = false
+        // const popoverList = this.$refs.popover
+        // popoverList.forEach(popover => {
+        //   popover.doClose()
+        // })
+      }
+    },
+    clearMatch (index) {
+      this.$set(this.selectList, index, { id: '', text: '' })
+    },
+    excelToSystem () {
+      this.fieldMate = ''
+      this.columnString = ''
+      this.columnStringExp = ''
+      for (const i in this.selectList) {
+        const select = this.selectList[i]
+        if (select.id) {
+          this.fieldMate += select.id + ':' + i + ','
+          this.columnString += select.id + '#,'
+          this.columnStringExp += select.id + ','
+          this.titleList.push({
+            text: this.dataList[i],
+            value: select.id
+          })
+        }
+      }
+      const defaultValue = this.getDefaultValue()
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, dynamicParams: queryDynamicParams = {}, ...params } = this.$query
+      const dynamicParams = { ...queryDynamicParams, ...defaultValue }
+      let dynamicParamsStr = ''
+      for (const key in dynamicParams) {
+        dynamicParamsStr += `${key}:${dynamicParams[key]},`
+      }
+      this.isRequesting = true
+      this.$http.$post({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: '1',
+        showFlag: '1',
+        requiredCheckFlag: this.requiredCheckFlag,
+        dynamicParams: dynamicParamsStr,
+        ...params
+      })
+        .then(data => {
+          this.getInvalidData(10, 1)
+          this.getValidData(10, 1)
+          this.isRequesting = false
+          this.stepIndex = 3
+        })
+        .catch(err => {
+          this.isRequesting = false
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    getInvalidData (limit, currentPage) {
+      this.loadingInvalidData = true
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$post({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 无效数据
+        validataType: 0,
+        showFlag: '1',
+        columnFieldNames: 'DATA_ERROR,' + this.columnString,
+        page: currentPage,
+        limit: limit,
+        requiredCheckFlag: this.requiredCheckFlag,
+        ...params
+      })
+        .then(data => {
+          this.invalidList = data.entitys
+          this.errorLength = data.total
+          this.loadingInvalidData = false
+        })
+        .catch(err => {
+          this.loadingInvalidData = false
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    getValidData (limit, currentPage) {
+      this.loadingValidData = true
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$post({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        fileId: this.fileId,
+        // 有效数据
+        validataType: 1,
+        showFlag: '1',
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        limit: limit,
+        page: currentPage,
+        requiredCheckFlag: this.requiredCheckFlag,
+        ...params
+      })
+        .then(data => {
+          this.validList = data.entitys
+          this.total = data.total
+          this.loadingValidData = false
+        })
+        .catch(err => {
+          this.loadingValidData = false
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    columnStyle ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) { // 第三第四列的背景色就改变了2和3都是列数的下标
+        return 'color:red;'
+      }
+    },
+    headeRowClass ({ row, column, rowIndex, columnIndex }) {
+      // 表头的背景颜色
+      if (rowIndex === 0) {
+        return 'background:#e3e3e3'
+      }
+    },
+    handleSizeChange1 (val) {
+      this.pageSize1 = val
+      this.getInvalidData(val, 1)
+    },
+    handleCurrentChange1 (val) {
+      this.currentPage1 = val
+      this.getInvalidData(this.pageSize1, val)
+    },
+    handleSizeChange2 (val) {
+      this.pageSize2 = val
+      this.getValidData(val, 1)
+    },
+    handleCurrentChange2 (val) {
+      this.currentPage2 = val
+      this.getValidData(this.pageSize2, val)
+    },
+    // 数据正确，导入全部数据
+    autoImportData (value) {
+      const loading = this.$loading({
+        lock: true,
+        text: this.$t('Importing data, please wait...'),
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$post({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: '1',
+        showFlag: '0',
+        validataType: 1,
+        requiredCheckFlag: this.requiredCheckFlag,
+        ...params
+      })
+        .then(data => {
+          loading.close()
+          this.stepIndex = 4
+          this.length = this.total
+        })
+        .catch(err => {
+          loading.close()
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    // 导出无效数据
+    exportErrorData () {
+      const loading = this.$loading({
+        lock: true,
+        text: this.$t('Exporting data, please wait...'),
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        exportErrorData: '1',
+        columnFieldNames: 'DATA_ERROR,' + this.columnStringExp,
+        ...params
+      }, {
+        responseType: 'blob',
+        onDownloadProgress: function (progressEvent) {
+          // 对原生进度事件的处理
+        }
+      })
+        .then(({ blob, filename }) => {
+          const objectUrl = URL.createObjectURL(blob)
+          var a = document.createElement('a')
+          document.body.appendChild(a)
+          a.href = objectUrl
+          a.download = filename || this.$moment().format('YYYYMMDDHHMMSS') + '.xlsx'
+          a.click()
+          window.URL.revokeObjectURL(objectUrl)
+          document.body.removeChild(a)
+          loading.close()
+          this.$message.success(this.$t('have downloaded the file to the local'))
+        })
+        .catch(err => {
+          loading.close()
+          this.$message.error(err.message)
+        })
+    },
+    // 只导入有效数据
+    importValidData (value) {
+      const loading = this.$loading({
+        lock: true,
+        text: this.$t('Importing data, please wait...'),
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      const { callback, component, flag, id, key, metaId, name, pageId, pageType, ...params } = this.$query
+      this.$http.$request({
+        action: 'entityImport',
+        entityId: this.$metaId,
+        importModel: this.importMode,
+        // 必填检查
+        // requiredCheckFlag: this.radio === '1' ? 'true' : 'false',
+        fileId: this.fileId,
+        fieldMate: this.fieldMate.substring(0, this.fieldMate.length - 1),
+        columnFieldNames: this.columnString.substring(0, this.columnString.length - 1),
+        importMethod: '1',
+        validataType: 0,
+        showFlag: '0',
+        errorIds: this.errorLength,
+        requiredCheckFlag: this.requiredCheckFlag,
+        ...params
+      })
+        .then(data => {
+          loading.close()
+          this.stepIndex = 4
+          this.length = this.total
+        })
+        .catch(err => {
+          loading.close()
+          this.$message.error(err.message || this.$t('deal with failure'))
+        })
+    },
+    async getOptionList () {
+      // const metaKeyType = this.$meta.getKeyType()
+      // const metaKeyName = this.$meta.getKey()
+      // const attriNames = this.$meta.attriNames || []
+      // const attributes = this.$meta.attributes || {}
+      // const optionList = []
+      // for (const key in attriNames) {
+      //   const attriName = attriNames[key]
+      //   const attribute = attributes[attriName] || {}
+      //   const item = {
+      //     value: attribute.name,
+      //     text: attribute.label,
+      //     children: []
+      //   }
+      //   if (attribute.relatedEntity) {
+      //     item.children = []
+      //     // 获取关联对象的主键
+      //     try {
+      //       const meta = await this.$store.dispatch({
+      //         type: 'ADD_META',
+      //         metaId: attribute.relatedEntity
+      //       })
+      //       const fields = meta.getAllFieldConfigs()
+      //       item.children = fields.map(field => ({ value: attribute.name + '|' + field.attriName, text: field.attriLabel }))
+      //     } catch (err) {
+      //       console.error(err)
+      //     }
+      //   }
+      //   optionList.push(item)
+      //   if (attribute.isRequired === '1') {
+      //     if (attribute.name !== metaKeyName || !(metaKeyType !== 'assigned' || attribute.dataType === 'derive')) {
+      //       this.requiredList.push(item)
+      //     }
+      //   }
+      // }
+      this.$http.get({
+        action: 'getEntityMetaView',
+        entityId: 'FM_ENTITY_VIEW',
+        metaId: this.$metaId,
+        allSub: true
+      })
+        .then(data => {
+          data[0].isMain = true
+          const formatData = (arr, field) => {
+            arr.forEach(item => {
+              item.field = field ? field + '|' + item.code : item.code
+              item.relationSort = item.relationType
+              if (!item.codeKey) item.codeKey = item.relatedEntity
+              item.id = item.field
+              item.name = item.text
+              item.meta = item.meta ? item.meta.id : ''
+              if (item.type === 'meta' && item.relationType === '1') item.isSub = true
+              if (item.children) formatData(item.children, item.isMain ? '' : item.field)
+            })
+          }
+          formatData(data)
+          this.optionList = data
+        })
+    },
+    handleRemove (file, fileList) {
+      this.fileList = fileList
+    }
+  },
+  created () {
+    this.getOptionList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.steps {
+  margin-top: 110px;
+  margin-bottom: 30px;
+  width: 80%;
+  margin-left: 10%;
+  margin-right: 10%;
+  &::v-deep {
+    .el-step__icon.is-text{
+      border:1.5px solid;
+    }
+    .el-step__title.is-finish{
+      @include font_color_primary;
+    }
+    .el-step__head.is-finish{
+      @include font_color_primary;
+    }
+    .el-step__head.is-process{
+      color: #c0c4cc;
+      border-color: #c0c4cc;
+    }
+    .el-step__title.is-process{
+      color: #c0c4cc;
+      border-color: #c0c4cc;
+      font-weight: normal;
+    }
+  }
+}
+.upload {
+  text-align: center;
+  &::v-deep {
+    .el-upload__tip{
+      color: #999999;
+      opacity: 0.85;
+    }
+    .el-upload-dragger{
+      border:none;
+      height: auto;
+    }
+    .el-button{
+
+    }
+  }
+}
+.operate {
+  text-align:center;
+  margin-bottom:30px;
+  margin-top: 40px;
+  height: 36px;
+}
+.step2, .step3, .step4{
+  width: 70%;
+  margin-left: 15%;
+  margin-right:15%;
+}
+.line{
+  height: 1px;
+  width: 100%;
+  background-color: #e3e3e3;
+  margin: 20px 0;
+}
+
+ .opera{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.auto-match{
+  @include font_color_primary;
+  cursor: pointer;
+  i {
+    margin-right: 4px;
+  }
+}
+.clear-match__all {
+  margin-right: 12px;
+  color: #F56C6C;
+  cursor: pointer;
+  i {
+    margin-right: 4px;
+  }
+}
+
+.match-table{
+  width: 100%;
+   th{
+     background-color: #e3e3e3;
+     height: 40px;
+     text-align: left;
+     padding:0 10px;
+   }
+   td{
+    border-bottom: 1px solid #e3e3e3;
+    text-align: left;
+    height: 40px;
+    padding:6px 10px;
+  }
+  tr:hover{
+    background-color: #dfff001a;
+  }
+}
+.clear-match {
+  cursor: pointer;
+}
+.noPass {
+  line-height: 24px;
+  i {
+    color: #F56C6C;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}
+.over{
+  font-size: 24px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.count{
+  @include font_color_primary;
+}
+.required-check-flag{
+  margin-top: 16px;
+}
+.success-icon {
+  font-size: 100px;
+  color: #67C23A
+}
+.option-popover {
+  position: absolute;
+  width:196px;
+  background: #fff;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0 ,0, 0 , .1);
+  padding: 12px;
+}
+</style>