1.新版页面样式

loulijun2021

2023-03-03 42aca2d891b0f5f134de5ad1c7bfc1d65fe8df7d

 src/views/xtsz/mmxg.vue

@@ -1,11 +1,616 @@
<template />
<!--<template>-->
<!--  <div>-->
<!--    <div class="body" :style="{height:mainHeight+'px'}">-->
<!--      <div class="bodyTopButtonGroup" style="justify-content: space-between">-->
<!--        <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
<!--        <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>-->
<!--      </div>-->

<script>
export default {
  name: 'Mmxg'
}
</script>
<!--      <div class="bodyTopFormGroup" style="padding-left: 20px">-->
<!--        <el-form-->
<!--          ref="form"-->
<!--          :model="form"-->
<!--          label-width="95px"-->
<!--          inline-->
<!--          label-position="left"-->
<!--          style="display: flex;"-->
<!--        >-->
<!--          <div class="elForm">-->
<!--            <el-form-item label=" 母件编码" style=" display: flex;">-->
<!--              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label=" 母件名称" style=" display: flex;">-->
<!--              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label=" 母件规格" style=" display: flex;">-->
<!--              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label=" 启用状态" style=" display: flex;">-->
<!--              <el-select v-model="form.OrgType" style="width: 200px" placeholder="请选择">-->
<!--                <el-option-->
<!--                  v-for="item in OrgTypeArr"-->
<!--                  :key="item.code"-->
<!--                  :label="item.name"-->
<!--                  :value="item.code"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item v-show="isExpandForm" label="版本编号" style=" display: flex;">-->
<!--              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />-->
<!--            </el-form-item>-->
<!--            <el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;">-->
<!--              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />-->
<!--            </el-form-item>-->
<!--            <el-form-item v-show="isExpandForm" label="创建日期" style=" display: flex;">-->
<!--              <el-date-picker-->
<!--                v-model="form.createdate"-->
<!--                style="width: 200px"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </div>-->
<!--          <div-->
<!--            class="bodySearchReset"-->
<!--            :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"-->
<!--          >-->
<!--            <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>-->
<!--            <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>-->
<!--          </div>-->
<!--        </el-form>-->
<!--        <div-->
<!--          class="bodyTopFormExpand"-->
<!--        >-->
<!--          <svg-icon-->
<!--            v-show="mouseHoverType==='mouseout'"-->
<!--            style="cursor: pointer"-->
<!--            :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
<!--            @mouseenter="mouseHoverType=$event.type"-->
<!--          />-->
<!--          <svg-icon-->
<!--            v-show="mouseHoverType==='mouseenter'"-->
<!--            style="cursor: pointer"-->
<!--            :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
<!--            @click="isExpandForm=!isExpandForm"-->
<!--            @mouseout="mouseHoverType=$event.type"-->
<!--          />-->
<!--        </div>-->
<!--      </div>-->

<style scoped>
<!--      <div class="elTableDiv" style="box-shadow:none">-->
<!--        <TableColumnSettings-->
<!--          style="position: absolute;-->
<!--        top: 4px;right: 11px"-->
<!--        />-->
<!--        <el-table-->
<!--          ref="tableDataRef"-->
<!--          class="tableFixed"-->
<!--          :data="tableData"-->
<!--          :height="isExpandForm?tableHeight:(tableHeight+40)+'px'"-->
<!--          border-->
<!--          :row-class-name="tableRowClassName"-->
<!--          :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px',}"-->
<!--          highlight-current-row-->
<!--          :header-cell-style="headerCellStyle"-->
<!--          :cell-style="cellStyle"-->
<!--          @sort-change="sortChange"-->
<!--        >-->
<!--          &lt;!&ndash;          :header-cell-style="this.$headerCellStyle"&ndash;&gt;-->
<!--          &lt;!&ndash;          :cell-style="this.$cellStyle"&ndash;&gt;-->
<!--          &lt;!&ndash;          <el-table-column&ndash;&gt;-->
<!--          &lt;!&ndash;            type="selection"&ndash;&gt;-->
<!--          &lt;!&ndash;            width="55"&ndash;&gt;-->
<!--          &lt;!&ndash;          />&ndash;&gt;-->
<!--          <el-table-column-->
<!--            prop="RowNum"-->
<!--            width="50"-->
<!--            fixed-->
<!--            label="序号"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="org_code"-->
<!--            label="数据标题"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="org_name"-->
<!--            label="组织名称"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="description"-->
<!--            label="组织类型"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="parentorg_name"-->
<!--            label="上级单位"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="lm_user"-->
<!--            label="创建人员"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="lm_date"-->
<!--            label="创建时间"-->
<!--            width="160"-->
<!--            sortable="custom"-->
<!--          />-->
<!--          <el-table-column-->
<!--            label="操作"-->
<!--            width="120"-->
<!--            fixed="right"-->
<!--          >-->
<!--            <template slot-scope="{row}">-->
<!--              <div class="operationClass">-->
<!--                <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
<!--                  <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->
<!--                </el-tooltip>-->
<!--                <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
<!--                  <i class="el-icon-delete" @click="del(row)" />-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->
<!--      &lt;!&ndash;分页&ndash;&gt;-->
<!--      <pagination-->
<!--        :total="total"-->
<!--        :page.sync="form.page"-->
<!--        :limit.sync="form.rows"-->
<!--        align="right"-->
<!--        layout="total,prev, pager, next,sizes"-->
<!--        popper-class="select_bottom"-->
<!--        @pagination="getOrganizationSearch"-->
<!--      />-->
<!--    </div>-->

</style>
<!--    <el-dialog-->
<!--      v-el-drag-dialog-->
<!--      :title="operation==='add'?'新增':'编辑'"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="800px"-->
<!--      :close-on-click-modal="false"-->
<!--      top="15vh"-->
<!--      @closed="handleClose"-->
<!--      @close="handleClose"-->
<!--    >-->
<!--      <el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="80px">-->
<!--        <el-form-item label="组织编码" prop="OrgCode">-->
<!--          <el-input v-model="dialogForm.OrgCode" :disabled="operation!=='add'" style="width: 200px" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="组织名称" prop="OrgName">-->
<!--          <el-input v-model="dialogForm.OrgName" style="width: 200px" />-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="SupUnit" label="上级单位">-->
<!--          <el-select-->
<!--            v-model="dialogForm.SupUnit"-->
<!--            style="width: 200px"-->
<!--            placeholder="请选择"-->
<!--            :popper-append-to-body="false"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="item in SupUnitArr"-->
<!--              :key="item.code"-->
<!--              :label="item.name"-->
<!--              :value="item.code"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <div class="footerButton">-->
<!--          <el-button v-waves @click="dialogVisibleCancel">取 消</el-button>-->
<!--          <el-button v-waves type="primary" @click="dialogVisibleConfirm">确 定</el-button>-->
<!--        </div>-->
<!--      </span>-->
<!--    </el-dialog>-->

<!--    &lt;!&ndash;导入组件&ndash;&gt;-->
<!--    <import-picker-->
<!--      ref="importPickerFunc"-->
<!--      class="importPickerClass"-->
<!--      :shows.sync="shows"-->
<!--      :title="title_value"-->
<!--      :colos="colos"-->
<!--      :code="code"-->
<!--    />-->

<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import Pagination from '@/components/Pagination'-->
<!--import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'-->
<!--import { getCookie } from '@/utils/auth'-->
<!--import ImportPicker from '@/components/ImportPicker'-->
<!--import { validateCode } from '@/utils/global'-->
<!--import elDragDialog from '@/directive/el-drag-dialog'-->
<!--import waves from '@/directive/waves'-->
<!--import TableColumnSettings from '@/components/TableColumnSettings'-->

<!--export default {-->
<!--  name: 'Zzjg',-->
<!--  components: {-->
<!--    Pagination, ImportPicker, TableColumnSettings-->
<!--  },-->
<!--  directives: { elDragDialog, waves },-->
<!--  data() {-->
<!--    return {-->
<!--      mouseHoverType: 'mouseout',-->
<!--      isExpandForm: false,-->
<!--      mainHeight: 0,-->
<!--      tableHeight: 0,-->
<!--      form: {-->
<!--        OrgCode: '', // 组织架构代码-->
<!--        OrgName: '', // 组织架构名称-->
<!--        OrgType: '', // 组织类型-->
<!--        UserName: '', // 创建人员-->
<!--        createdate: '',-->
<!--        prop: 'lm_date', // 排序字段-->
<!--        order: 'desc', // 排序字段-->
<!--        page: 1, // 第几页-->
<!--        rows: 20 // 每页多少条-->
<!--      },-->
<!--      OrgTypeArr: [-->
<!--        { label: '是', value: 'Y' },-->
<!--        { label: '否', value: 'N' }-->
<!--      ],-->

<!--      total: 10,-->
<!--      tableData: [],-->
<!--      dialogVisible: false,-->
<!--      dialogForm: {-->
<!--        OrgType: '',-->
<!--        OrgCode: '',-->
<!--        OrgName: '',-->
<!--        SupUnit: ''// 上级单位-->
<!--      },-->
<!--      operation: '',-->
<!--      dialogFormRules: {-->
<!--        OrgType: [-->
<!--          { required: true, message: '请输入选择类型', trigger: ['blur', 'change'] }-->
<!--        ],-->
<!--        OrgCode: [-->
<!--          { required: true, validator: validateCode, trigger: ['blur', 'change'] }-->
<!--        ],-->
<!--        OrgName: [-->
<!--          { required: true, message: '请输入名称', trigger: ['blur', 'change'] }-->
<!--        ]-->

<!--      },-->

<!--      title_value: '数据导入 / 点检部位',-->
<!--      code: '4',-->
<!--      shows: false-->

<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    shows() {-->
<!--      if (!this.shows) {-->
<!--        this.getOrganizationSearch()-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getOrganizationSearch()-->
<!--  },-->
<!--  mounted() {-->
<!--    window.addEventListener('resize', this.getHeight)-->
<!--    this.getHeight()-->
<!--  },-->
<!--  methods: {-->
<!--    async getOrganizationSearch() {-->
<!--      const res = await OrganizationSearch(this.form)-->
<!--      this.tableData = res.data-->
<!--      this.total = res.count-->
<!--    },-->
<!--    // 排序改变时-->
<!--    sortChange({ column, prop, order }) {-->
<!--      if (order === 'descending') {-->
<!--        order = 'desc'-->
<!--      } else if (order === 'ascending') {-->
<!--        order = 'asc'-->
<!--      } else {-->
<!--        order = 'desc'-->
<!--      }-->
<!--      this.form.order = order-->
<!--      this.form.prop = prop-->
<!--      this.getOrganizationSearch()-->
<!--    },-->
<!--    // 查询-->
<!--    search() {-->
<!--      this.getOrganizationSearch()-->
<!--    },-->
<!--    // 导入按钮-->
<!--    upload() {-->
<!--      this.shows = true-->
<!--      this.$refs.importPickerFunc.newDataFunc()-->
<!--    },-->
<!--    colos() {-->
<!--      this.shows = false-->
<!--    },-->
<!--    // 重置-->
<!--    reset() {-->
<!--      this.form.OrgCode = ''-->
<!--      this.form.OrgName = ''-->
<!--      this.form.OrgType = ''-->
<!--      this.form.UserName = ''-->
<!--      this.getOrganizationSearch()-->
<!--    },-->

<!--    // 新增按钮-->
<!--    add(operation) {-->
<!--      this.operation = operation-->
<!--      this.dialogVisible = true-->
<!--    },-->
<!--    // 修改按钮-->
<!--    edit(operation, row) {-->
<!--      this.operation = operation-->
<!--      this.dialogVisible = true-->

<!--      this.$nextTick(() => {-->
<!--        this.dialogForm.OrgCode = row.org_code-->
<!--        this.dialogForm.OrgName = row.org_name-->
<!--        this.dialogForm.SupUnit = row.parent_id-->
<!--      })-->
<!--    },-->
<!--    // 删除按钮-->
<!--    async del(row) {-->
<!--      this.$confirm('是否确认删除?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        DeleteOrganization({ orgid: row.code }).then(res => {-->
<!--          if (res.code === '200') {-->
<!--            this.$message.success('删除成功!')-->
<!--            if (this.form.page > 1 && this.tableData.length === 1) {-->
<!--              this.form.page&#45;&#45;-->
<!--            }-->
<!--            this.getOrganizationSearch()-->
<!--          }-->
<!--        })-->
<!--      }).catch(() => {-->
<!--        this.$message.info('已取消删除')-->
<!--      })-->
<!--    },-->
<!--    // 对话框关闭事件-->
<!--    handleClose() {-->
<!--      this.dialogForm.OrgType = ''-->
<!--      this.dialogForm.OrgCode = ''-->
<!--      this.dialogForm.OrgName = ''-->
<!--      this.dialogForm.SupUnit = ''-->
<!--      this.$refs.dialogForm.clearValidate()-->
<!--    },-->
<!--    // 对话框取消-->
<!--    dialogVisibleCancel() {-->
<!--      this.dialogVisible = false-->
<!--    },-->
<!--    // 对话框确认-->
<!--    dialogVisibleConfirm() {-->
<!--      this.$refs.dialogForm.validate(valid => {-->
<!--        if (valid) {-->
<!--          const data = {-->
<!--            OrganCode: this.dialogForm.OrgCode,-->
<!--            OrganName: this.dialogForm.OrgName,-->
<!--            OperType: this.operation === 'add' ? 'Add' : 'Update',-->
<!--            Operator: getCookie('admin')-->
<!--          }-->
<!--          AddUpdateOrganization(data).then(res => {-->
<!--            if (res.code === '200') {-->
<!--              this.$message.success(this.operation === 'add' ? '添加成功！' : '修改成功！')-->
<!--              this.dialogVisible = false-->
<!--              this.getOrganizationSearch()-->
<!--            } else {-->
<!--              this.$message.error(this.operation === 'add' ? '添加失败！' : '修改失败！')-->
<!--            }-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    // 获取页面高度-->
<!--    getHeight() {-->
<!--      this.$nextTick(() => {-->
<!--        this.mainHeight = window.innerHeight - 85-->
<!--        this.tableHeight = this.mainHeight - 255-->
<!--        this.$refs.tableDataRef.doLayout()-->
<!--      })-->
<!--    },-->
<!--    tableRowClassName({ row, rowIndex }) {-->
<!--      return 'custom-row'-->
<!--    },-->
<!--    headerCellStyle() {-->
<!--      const option = {-->
<!--        // background: '#a7a7a7', padding: '0'-->
<!--        background: '#f8f8fa',-->
<!--        padding: '10px 0',-->
<!--        // fontFamily: 'SimHei',-->
<!--        // margin: '3px 0',-->
<!--        color: '#bfc3c8',-->
<!--        fontWeight: 600-->

<!--        // borderRight: '1px #000 solid'-->

<!--      }-->
<!--      return option-->
<!--    },-->

<!--    cellStyle() {-->
<!--      const option = {-->
<!--        // fontFamily: 'SimHei',-->
<!--        // padding: '5px 0'-->
<!--        // fontFamily: 'sans-serif',-->
<!--        // fontFamily: 'Rubber cover glass BL-04',-->
<!--        // fontWeight: 'bold',-->
<!--        // fontWeight: 550,-->

<!--        color: '#706f6f'-->
<!--        // color: `rgb(51, 54, 57)`-->

<!--      }-->
<!--      return option-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--&lt;!&ndash;公共页面样式&ndash;&gt;-->
<!--<style lang="scss" scoped>-->
<!--$main_color: #42b983;-->
<!--::v-deep .el-button&#45;&#45;text {-->
<!--  font-size: 14px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.el-icon-share, .el-icon-delete, .el-icon-edit-outline {-->
<!--  color: $main_color;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.el-icon-edit-outline {-->
<!--  margin-right: 15px;-->
<!--}-->

<!--::v-deep .el-button&#45;&#45;primary, .el-button&#45;&#45;default, .el-button&#45;&#45;info {-->
<!--  height: 34px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  padding: 0 15px;-->
<!--}-->

<!--::v-deep .el-button&#45;&#45;primary {-->
<!--  //background-color: $main_color !important;-->
<!--}-->

<!--::v-deep .el-button&#45;&#45;default {-->
<!--  background-color: #f8f8fa;-->
<!--  border: none;-->
<!--}-->

<!--::v-deep .el-input__inner {-->
<!--  height: 34px;-->
<!--  line-height: 34px;-->
<!--  //color: #a7a7a7;-->
<!--}-->

<!--::v-deep .el-dialog__body {-->
<!--  padding: 20px 100px !important;-->
<!--}-->

<!--::v-deep .dialogVisibleRoles .el-dialog__body {-->
<!--  padding: 20px 20px !important;-->
<!--}-->

<!--::v-deep .importPickerClass .el-dialog__body {-->
<!--  padding: 20px 20px !important;-->
<!--}-->

<!--::v-deep .el-dialog__footer {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--}-->

<!--::v-deep .el-table .caret-wrapper {-->
<!--  transform: scale(0.8);-->
<!--}-->

<!--::v-deep .cell {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--::v-deep .el-table::before {-->
<!--  height: 0;-->
<!--}-->

<!--::v-deep .el-table__body-wrapper {-->
<!--  background-color: #f8f8fa;-->
<!--}-->

<!--::v-deep .el-table__body .el-table__row.hover-row td {-->
<!--  background-color: #eaecef;-->
<!--}-->

<!--::v-deep .el-form&#45;&#45;inline .el-form-item__label {-->
<!--  color: #a7a7a7;-->
<!--}-->

<!--.body ::v-deep .el-divider {-->
<!--  border: 1px solid #eee;-->
<!--  width: 99%;-->
<!--  margin: 10px auto;-->
<!--}-->

<!--.body ::v-deep .el-form-item {-->
<!--  margin-bottom: 0;-->
<!--  margin-right: 65px;-->
<!--}-->

<!--.userDialogVisible ::v-deep .el-form-item {-->
<!--  margin-bottom: 0;-->

<!--}-->

<!--::v-deep .el-select__caret {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--}-->

<!--.tableFixed {-->
<!--  ::v-deep .el-table__fixed-right {-->
<!--    height: 100% !important;-->
<!--  }-->

<!--  ::v-deep .el-table__fixed {-->
<!--    height: 100% !important;-->
<!--  }-->
<!--}-->
<!--</style>-->
<!--<style>-->

<!--.el-table .custom-row {-->
<!--  background: #f8f8fa;-->
<!--}-->

<!--/* 去掉中间数据的分割线 */-->
<!--.el-table .el-table__row > td {-->
<!--  border-right: none;-->
<!--  border-left: none;-->
<!--}-->

<!--/* 去掉上面的线 */-->
<!--.el-table th.is-leaf {-->
<!--  border-right: 1px solid #f8f8fa;-->
<!--  /*border: none;*/-->

<!--  /*font-family: sans-serif;*/-->
<!--}-->

<!--/*!* 去掉最下面的那一条线 *!*/-->
<!--/*.el-table::before {*/-->
<!--/*  height: 0px;*/-->
<!--/*}*/-->

<!--.el-table th.el-table__cell > .cell {-->
<!--  border-right: 1px solid rgba(191, 195, 200, 0.6);-->
<!--  line-height: 20px !important;-->
<!--  height: 20px !important;-->
<!--  display: flex;-->
<!--  justify-content: start;-->
<!--}-->

<!--.el-table th.el-table__cell:nth-last-child(1) > .cell {-->
<!--  border-right: none;-->
<!--  /*font-family: Kai;*/-->
<!--  /*font-family: Arial;*/-->
<!--  /*font-weight: bolder;*/-->
<!--  /*font-family: SimSun;*/-->
<!--}-->
<!--</style>-->