ysy 1 rok temu
rodzic
commit
0ca8b090a2

+ 0 - 254
src/views/inspectionClassify/components/ProductModal.vue

@@ -1,254 +0,0 @@
-<template>
-  <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
-    :close-on-press-escape="false" append-to-body width="70%">
-
-    <el-card shadow="never">
-      <ProductSearch @search="reload" ref="searchRef" />
-
-      <ele-split-layout width="244px" allow-collapse :right-style="{ overflow: 'hidden' }">
-        <div class="ele-border-lighter split-layout-right-content">
-          <el-tree :data="treeList" :props="defaultProps" ref="treeRef"
-            :default-expanded-keys="categoryId ? [categoryId] : []" :highlight-current="true" node-key="id"
-            @node-click="handleNodeClick"></el-tree>
-        </div>
-
-
-        <!-- 数据表格 -->
-        <template v-slot:content>
-          <ele-pro-table style="min-height: 400px;" ref="table" :columns="columns" :datasource="datasource"
-            :selection.sync="selection" row-key="id">
-          </ele-pro-table>
-        </template>
-      </ele-split-layout>
-
-    </el-card>
-
-
-
-
-
-    <div class="rx-sc">
-
-      <el-button type="primary" size="small" @click="selected">选择</el-button>
-      <el-button size="small" @click="handleClose">关闭</el-button>
-
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-
-
-
-import ProductSearch from './product-search.vue'
-import { getTreeByPid, getList } from '@/api/classifyManage';
-export default {
-  components: {
-    ProductSearch
-  },
-  data() {
-    return {
-      visible: false,
-      title: '选择工具',
-
-      categoryLevelId: null,
-      categoryId: 1,
-      treeList: [],
-      treeLoading: false,
-
-      defaultProps: {
-        children: 'children',
-        label: 'name'
-      },
-      type: null,
-
-      // 表格列配置
-      columns: [
-        {
-          columnKey: 'selection',
-          type: 'selection',
-          width: 45,
-          align: 'center',
-          selectable: (row, index) => {
-            return !this.processData.some((it) => row.id == it.categoryId);
-          },
-          reserveSelection: true,
-          fixed: 'left'
-        },
-
-        {
-          label: '物料名称',
-          prop: 'name',
-        },
-
-        {
-          label: '物料编码',
-          prop: 'code'
-        },
-        {
-          label: '牌号',
-          prop: 'brandNum'
-        },
-        {
-          label: '型号',
-          prop: 'modelType'
-        },
-
-        {
-          prop: 'availableCountBase',
-          label: '包装库存',
-          sortable: 'custom',
-        },
-        {
-          label: '单位',
-          prop: 'weightUnit'
-        },
-
-        {
-          prop: 'packingCountBase',
-          label: '计量库存',
-          sortable: 'custom',
-        },
-
-        {
-          label: '计量单位',
-          prop: 'unit'
-        },
-
-
-
-        {
-          label: '数量',
-          prop: 'count'
-        },
-
-
-
-
-
-      ],
-
-      // 表格选中数据
-      selection: [],
-
-      processData: [],
-      current: null,
-
-
-
-
-
-    }
-  },
-
-  watch: {
-
-  },
-  methods: {
-
-
-    /* 表格数据源 */
-    async datasource({ page, limit, where }) {
-      const res = await getList({
-        ...where,
-        pageNum: page,
-        size: limit,
-        categoryLevelId: this.categoryLevelId,
-
-      });
-      return res;
-    },
-
-    open(item) {
-      this.processData = item || []
-      this.visible = true
-
-      this.getTreeData();
-
-    },
-
-
-
-    async getTreeData() {
-      try {
-        this.treeLoading = true;
-
-        const res = await getTreeByPid(4);
-        this.treeLoading = false;
-        if (res?.code === '0') {
-          this.treeList = res.data;
-
-          this.$nextTick(() => {
-            // 默认高亮第一级树节点
-            if (this.treeList[0]) {
-              this.rootTreeId = this.treeList[0].id
-              this.$nextTick(() => {
-                this.$refs.treeRef.setCurrentKey(this.treeList[0].id);
-              });
-
-            }
-          });
-          return this.treeList;
-        }
-      } catch (error) { }
-      this.treeLoading = false;
-    },
-
-
-
-
-    handleNodeClick(data) {
-      this.categoryLevelId = data.id;
-      this.$refs.table.reload({ pageNum: 1, where: {} });
-
-    },
-
-
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ page: 1, where: where });
-    },
-
-
-
-    handleClose() {
-      this.visible = false
-      this.$refs.table.setSelectedRows([]);
-      this.selection = []
-
-    },
-    selected() {
-      let _arr = []
-      if (!this.selection.length) {
-        this.$message.error('请至少选择一条数据');
-        return;
-      }
-
-      _arr = this.selection.map(m => {
-        m.categoryId = m.id
-        delete  m.id
-        return {
-          ...m
-        }
-      })
-
-
-      this.$emit('chooseModal', _arr)
-      this.handleClose()
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.rx-sc {
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ml60 {
-  margin-left: 60px;
-}
-</style>

+ 0 - 178
src/views/inspectionClassify/components/add.vue

@@ -1,178 +0,0 @@
-<template>
-  <el-dialog :title="title" v-if="visible" :visible.sync="visible" :before-close="handleClose"
-    :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="70%">
-
-    <el-card shadow="never">
-      <userEditSearch @search="reload" />
-
-      <!-- 数据表格 -->
-      <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection" row-key="id">
-        <template v-slot:status="{ row }">
-          {{ row.status ? '启用' : "停用" }}
-        </template>
-
-        <template v-slot:type="{ row }">
-          {{ getDictValue('质检标准类型', row.type) }}
-        </template>
-
-      </ele-pro-table>
-
-
-    </el-card>
-
-    <div class="btns">
-      <el-button type="primary" size="small" @click="selected">选择</el-button>
-      <el-button size="small" @click="handleClose">关闭</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-
-
-import { getList } from '@/api/inspectionStandard';
-import userEditSearch from './user-edit-search.vue'
-import dictMixins from '@/mixins/dictMixins';
-export default {
-  components: {
-    userEditSearch
-  },
-  mixins: [dictMixins],
-
-  data() {
-    return {
-      visible: false,
-      title: '选择质检标准',
-
-      // 表格列配置
-      columns: [
-        {
-          columnKey: 'selection',
-          type: 'selection',
-          width: 45,
-          align: 'center',
-          selectable: (row, index) => {
-            return !this.processData.some((it) => it.id == row.id);
-          },
-          reserveSelection: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'code',
-          label: '质检编码'
-        },
-        {
-          label: '质检名称',
-          prop: 'name'
-        },
-
-        {
-          label: '状态',
-          prop: 'status',
-          slot: 'status'
-        },
-
-        {
-          label: '版本号',
-          prop: 'version',
-        },
-
-        {
-          label: '标准类型',
-          prop: 'type',
-          slot: 'type',
-        },
-
-
-
-        {
-          label: '标准代码',
-          prop: 'standardCode',
-
-        },
-
-
-
-
-
-      ],
-
-      // 表格选中数据
-      selection: [],
-
-      processData: [],
-      categoryId: null
-
-    }
-  },
-
-  watch: {
-
-  },
-  methods: {
-
-
-
-
-    open(categoryId) {
-      this.categoryId = categoryId
-      this.visible = true
-    },
-
-    /* 表格数据源 */
-    async datasource({ page, limit, where }) {
-      const res = await getList({
-        ...where,
-        categoryLevelId:  this.categoryId,
-        pageNum: page,
-        size: limit
-
-      });
-      return res;
-    },
-
-    /* 刷新表格 */
-    reload(where) {
-      this.$refs.table.reload({ page: 1, where: where });
-    },
-
-
-
-    handleClose() {
-      this.visible = false
-      this.$refs.table.setSelectedRows([]);
-      this.selection = []
-
-    },
-    selected() {
-      if (!this.selection.length) {
-        this.$message.error('请至少选择一条数据');
-        return;
-      }
-      let _arr = []
-      _arr = this.selection.map(m => {
-
-        return {
-          qualityStandardId: m.id,
-          status: 1,
-          mode: null,
-          version: null,
-          categoryLevelId: this.categoryId,
-          rootCategoryLevelId: '12'
-
-        }
-      })
-
-      this.$emit('chooseProcess', _arr)
-      this.handleClose()
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.btns {
-  text-align: center;
-  padding: 10px 0;
-}
-</style>

+ 0 - 280
src/views/inspectionClassify/components/edit.vue

@@ -1,280 +0,0 @@
-<!-- 用户编辑弹窗 -->
-<template>
-  <el-dialog class="ele-dialog-form" title="编辑" v-if="visible" :visible.sync="visible" :before-close="handleClose"
-    :close-on-click-modal="false" :close-on-press-escape="false" width="1000px">
-    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <el-row>
-
-
-
-
-
-        <el-col :span="12">
-          <el-form-item label="质检方式:" prop="mode">
-            <DictSelection dictName="质检方式" v-model="form.mode"></DictSelection>
-          </el-form-item>
-        </el-col>
-
-
-
-
-
-      </el-row>
-    </el-form>
-
-    <headerTitle title="质检工具">
-      <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
-    </headerTitle>
-
-    <el-table ref="multipleTable" :data="form.toolList" tooltip-effect="dark" style="width: 100%" stripe
-      :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
-
-
-      <el-table-column label="设备名称" prop="code" min-width="120">
-        <template slot-scope="{ row }">
-          {{ row.name }}
-        </template></el-table-column>
-
-      <el-table-column label="设备编码" prop="code" min-width="120">
-        <template slot-scope="{ row }">
-          {{ row.code }}
-        </template></el-table-column>
-
-      <el-table-column label="牌号" prop="brandNum" min-width="120">
-        <template slot-scope="{ row }">
-          {{ row.brandNum }}
-        </template></el-table-column>
-
-      <el-table-column label="型号" prop="modelType" min-width="120">
-        <template slot-scope="{ row }">
-          {{ row.modelType }}
-        </template></el-table-column>
-
-
-
-
-
-      <el-table-column label="操作" fixed="right">
-        <template slot-scope="{ $index, row }">
-          <el-button type="text" @click="removeItem($index, row)">删除设备</el-button>
-        </template>
-      </el-table-column>
-
-
-    </el-table>
-
-    <headerTitle title="注意事项">
-      <el-button type="primary" size="small" @click="addPostscript">新增</el-button>
-    </headerTitle>
-
-
-    <el-table ref="multipleTable" :data="form.postscriptList" tooltip-effect="dark" style="width: 100%" stripe
-      :header-cell-style="{ background: '#EEEEEE', border: 'none' }">
-
-
-      <el-table-column label="排序" prop="" width="100">
-        <template slot-scope="{ row }">
-          <el-input placeholder="请输入" type="number" v-model.number="row.sort
-            " clearable></el-input>
-        </template></el-table-column>
-
-      <el-table-column label="注意事项" prop="" min-width="120">
-        <template slot-scope="{ row }">
-          <el-input placeholder="请输入" type="textarea" :rows="1" v-model="row.content
-            " clearable></el-input>
-        </template></el-table-column>
-
-
-
-
-
-
-      <el-table-column label="操作" fixed="right" width="100">
-        <template slot-scope="{ $index, row }">
-          <el-button type="text" @click="removePostscript($index, row)">删除</el-button>
-        </template>
-      </el-table-column>
-
-
-    </el-table>
-
-
-
-    <template v-slot:footer>
-      <el-button @click="handleClose">取消</el-button>
-      <el-button type="primary" :loading="loading" @click="save">
-        保存
-      </el-button>
-    </template>
-
-
-    <ProductModal ref="productRefs" @chooseModal="chooseModal" />
-
-  </el-dialog>
-</template>
-
-<script>
-
-import { update, getById } from '@/api/inspectionClassify';
-import ProductModal from './ProductModal.vue'
-export default {
-  components: {
-    ProductModal
-  },
-
-
-
-  data() {
-    const defaultForm = function () {
-      return {
-        id: '',
-        name: '',
-        status: 1,
-        type: '',
-        version: '1.0',
-        standardCode: '',
-        toolList: [],
-        postscriptList: [],
-        toolRemoveIds: [],
-        postscriptRemoveIds: []
-      };
-    };
-    return {
-      defaultForm,
-      // 表单数据
-      form: { ...defaultForm() },
-      // 表单验证规则
-      rules: {
-
-        name: [{ required: true, message: '请输入', trigger: 'blur' }],
-
-        type: {
-          required: true,
-          message: '请选择',
-          trigger: 'change'
-        },
-
-
-
-      },
-      visible: false,
-
-      title: null,
-      loading: false,
-
-    };
-  },
-
-  created() {
-
-  },
-  methods: {
-    open(row) {
-
-      this.getDetail(row.id)
-      this.visible = true;
-
-
-    },
-
-    getDetail(id) {
-      getById(id).then(res => {
-        if (!res.data.version) {
-          res.data.version = '1.0'
-        }
-        this.form = res.data
-        this.form['postscriptRemoveIds'] = []
-        this.form['toolRemoveIds'] = []
-      })
-    },
-
-    /* 保存编辑 */
-    save() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return false;
-        }
-        this.loading = true;
-
-
-        update(this.form)
-          .then((msg) => {
-            this.loading = false;
-            this.$message.success(msg);
-            this.handleClose();
-            this.$emit('done');
-          })
-          .catch((e) => {
-            this.loading = false;
-          });
-      });
-    },
-    restForm() {
-      this.form = { ...this.defaultForm() };
-
-    },
-    handleClose() {
-      this.restForm();
-      this.visible = false;
-    },
-
-    handleAdd() {
-      this.$refs.productRefs.open(this.form.toolList)
-    },
-
-    chooseModal(data) {
-      this.form.toolList = [...this.form.toolList, ...data]
-
-    },
-
-    removeItem(idx, row) {
-      if (this.form.toolList.length == 1) {
-        return this.$message.error('至少保留一个设备!');
-      }
-
-      this.$confirm(`是否删除这个设备?`).then(async () => {
-        this.form.toolList.splice(idx, 1)
-
-        if (row.id) {
-          this.form.toolRemoveIds.push(row.id)
-        }
-
-
-      })
-    },
-
-    addPostscript() {
-      this.form.postscriptList.push({ sort: null, content: '' })
-    },
-    removePostscript(idx, row) {
-      if (this.form.postscriptList.length == 1) {
-        return this.$message.error('至少保留一个事项!');
-      }
-
-      this.$confirm(`是否删除这个事项?`).then(async () => {
-        this.form.postscriptList.splice(idx, 1)
-        if (row.id) {
-          this.form.postscriptRemoveIds.push(row.id)
-        }
-
-
-      })
-    },
-
-
-  }
-};
-</script>
-<style lang="scss" scoped>
-.location-warp {
-  display: flex;
-
-  .detail {
-    margin-left: 10px;
-  }
-}
-
-:deep(.el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child) {
-  margin-bottom: 22px;
-}
-</style>

+ 0 - 102
src/views/inspectionClassify/components/product-search.vue

@@ -1,102 +0,0 @@
-<!-- 搜索表单 -->
-<template>
-  <el-form
-    label-width="77px"
-    class="ele-form-search"
-    @keyup.enter.native="search"
-    @submit.native.prevent
-  >
-    <el-row :gutter="10">
-      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
-        <el-form-item label="编码">
-          <el-input clearable v-model="where.code" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
-        <el-form-item label="名称">
-          <el-input clearable v-model="where.name" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-
-      <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
-        <el-form-item label="型号">
-          <el-input clearable v-model="where.modelType" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { md: 4 } : { md: 4 }">
-        <div class="ele-form-actions">
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            class="ele-btn-icon"
-            @click="search"
-          >
-            查询
-          </el-button>
-
-          <el-button
-            @click="reset"
-            icon="el-icon-refresh"
-            class="ele-btn-icon"
-            size="medium"
-            >重置</el-button
-          >
-        </div>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-
-<script>
-  export default {
-    data () {
-      // 默认表单数据
-      const defaultWhere = {
-        name: '',
-        code: '',
-        modelType: ''
-      };
-      return {
-        defaultWhere,
-        // 表单数据
-        where: { ...defaultWhere },
-        treeData:[]
-      };
-    },
-    computed: {
-      // 是否开启响应式布局
-      styleResponsive () {
-        return this.$store.state.theme.styleResponsive;
-      }
-    },
-    created() {
-    },
-    methods: {
-
-      /* 搜索 */
-      search () {
-        if (this.where.appType === 0) {
-          this.where.appType = '';
-        }
-        this.$emit('search', this.where);
-      },
-      /*  重置 */
-      reset () {
-        this.where = { ...this.defaultWhere };
-        this.search();
-      },
-      reset2 () {
-        this.where = { ...this.defaultWhere };
-
-      }
-    }
-  };
-</script>
-
-<style>
-  .ele-form-actions {
-    display: inline-block;
-    transform: translate(0);
-    transition: all;
-  }
-</style>

+ 3 - 3
src/views/inspectionClassify/components/qualityItem.vue

@@ -10,7 +10,7 @@
     width="85%"
     width="85%"
   >
   >
     <el-card shadow="never">
     <el-card shadow="never">
-      <userEditSearch @search="reload" />
+
 
 
       <!-- 数据表格 -->
       <!-- 数据表格 -->
       <ele-pro-table
       <ele-pro-table
@@ -32,11 +32,11 @@
 
 
 <script>
 <script>
   import { getList } from '@/api/inspectionStandard';
   import { getList } from '@/api/inspectionStandard';
-  import userEditSearch from './user-edit-search.vue';
+
 
 
   export default {
   export default {
     components: {
     components: {
-      userEditSearch
+
     },
     },
     mixins: [],
     mixins: [],
 
 

+ 0 - 72
src/views/inspectionClassify/components/user-edit-search.vue

@@ -1,72 +0,0 @@
-<!-- 搜索表单 -->
-<template>
-  <el-form label-width="77px" class="ele-form-search" @keyup.enter.native="search" @submit.native.prevent>
-    <el-row :gutter="15">
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="标准名称:">
-          <el-input clearable v-model="where.name" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="标准代码:">
-          <el-input clearable v-model="where.standardCode" placeholder="请输入" />
-        </el-form-item>
-      </el-col>
-
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <el-form-item label="状态:">
-          <el-select v-model="where.status" class="m-2" placeholder="请选择" size="large">
-            <el-option label="停用" :value="0" />
-            <el-option label="启用" :value="1" />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
-        <div class="ele-form-actions">
-          <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="search">
-            查询
-          </el-button>
-          <el-button @click="reset">重置</el-button>
-        </div>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-
-<script>
-export default {
-  data() {
-    // 默认表单数据
-    const defaultWhere = {
-      name: '',
-      standardCode: '',
-      status: ''
-    };
-    return {
-      defaultWhere,
-      // 表单数据
-      where: { ...defaultWhere },
-
-    };
-  },
-  computed: {
-    // 是否开启响应式布局
-    styleResponsive() {
-      return this.$store.state.theme.styleResponsive;
-    }
-  },
-  methods: {
-    /* 搜索 */
-    search() {
-      this.$emit('search', this.where);
-    },
-    /*  重置 */
-    reset() {
-
-      this.where = { ...this.defaultWhere };
-      this.search();
-    }
-  }
-};
-</script>

+ 8 - 9
src/views/inspectionClassify/components/user-list.vue

@@ -29,11 +29,12 @@
         {{ row.qualityStandard && row.qualityStandard.name }}
         {{ row.qualityStandard && row.qualityStandard.name }}
       </template>
       </template>
 
 
+
       <template v-slot:code="{ row }">
       <template v-slot:code="{ row }">
         <el-link
         <el-link
           type="primary"
           type="primary"
           :underline="false"
           :underline="false"
-          @click="openDetail(row.qualityStandard)"
+           @click="openDetail(row.qualityStandard)"
         >
         >
           {{ row.qualityStandard && row.qualityStandard.code }}
           {{ row.qualityStandard && row.qualityStandard.code }}
         </el-link>
         </el-link>
@@ -91,10 +92,10 @@
       </template>
       </template>
     </ele-pro-table>
     </ele-pro-table>
 
 
-    <Add @chooseProcess="chooseProcess" ref="addRef" />
 
 
-    <edit ref="edit" @done="done"></edit>
-    <Detail ref="detailRef"></Detail>
+
+
+
     <qualityItem ref="qualityItemRef"></qualityItem>
     <qualityItem ref="qualityItemRef"></qualityItem>
   </div>
   </div>
 </template>
 </template>
@@ -107,14 +108,12 @@
     saveBatch
     saveBatch
   } from '@/api/inspectionClassify/index';
   } from '@/api/inspectionClassify/index';
   import dictMixins from '@/mixins/dictMixins';
   import dictMixins from '@/mixins/dictMixins';
-  import Add from './add.vue';
-  import Edit from './edit.vue';
-  import Detail from '@/views/inspectionStandard/components/edit.vue';
+
   import qualityItem from './qualityItem.vue'
   import qualityItem from './qualityItem.vue'
 
 
   export default {
   export default {
     mixins: [dictMixins],
     mixins: [dictMixins],
-    components: { userSearch, Edit, Detail , qualityItem, Add},
+    components: { userSearch , qualityItem},
     props: {
     props: {
       // 类别id
       // 类别id
 
 
@@ -223,7 +222,7 @@
       },
       },
       openDetail(row) {
       openDetail(row) {
         console.log(row);
         console.log(row);
-        this.$refs.detailRef.open('detail', row);
+
       },
       },
 
 
       chooseProcess(data) {
       chooseProcess(data) {

+ 2 - 2
src/views/inspectionStandard/components/edit.vue

@@ -74,7 +74,7 @@
             @click="addParameter"
             @click="addParameter"
             >选择工艺参数标准</el-button
             >选择工艺参数标准</el-button
           > -->
           > -->
-          <el-tabs v-model="activeName" type="card">
+          <el-tabs v-model="activeName" type="card" v-if="false">
             <el-tab-pane
             <el-tab-pane
               :label="item.name"
               :label="item.name"
               :name="item.name"
               :name="item.name"
@@ -222,7 +222,7 @@
             </el-tab-pane></el-tabs
             </el-tab-pane></el-tabs
           >
           >
 
 
-          <div class="add-product" @click="add"  v-if="type!='detail'">
+          <div class="add-product" @click="add"    v-if="false">
             <i class="el-icon-circle-plus-outline"></i>
             <i class="el-icon-circle-plus-outline"></i>
           </div>
           </div>
         </el-col>
         </el-col>