eln_web/src/views/business/comps/select/SelectTemplateDialog.vue

<template>
  <div class="select-template">
    <el-dialog :title="$t('page.system.template.selectTemplate')" :visible.sync="open" width="1200px" append-to-body
      :close-on-click-modal="false" style="padding: 20px 20px;">
      <div class="dialog-container">
        <el-form :model="searchForm" ref="searchForm" :inline="true">
          <el-form-item :label="$t('page.system.template.name') + '：'" prop="name">
            <el-input v-model="searchForm.name" :placeholder="$t('form.placeholderInput')" clearable
              style="width: 150px" @keyup.enter.native="search" />
          </el-form-item>
          <el-form-item :label="$t('page.system.template.department') + '：'" prop="deptId">
            <select-dept style="width:200px" v-model="searchForm.deptId" @change="search" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('form.search') }}</el-button>
            <el-button icon="el-icon-refresh" @click="reset">{{ $t('form.reset') }}</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" border :data="list">
          <!-- 单选列 -->
          <el-table-column width="80" align="center">
            <template slot-scope="scope">
              <el-radio v-model="selectedId" :label="scope.row.id" class="hide-label"
                @click.native.stop="handleRadioClick(scope.row)"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="测试用" align="center" prop="sn"  width="100px"/>
          <el-table-column :label="$t('page.system.template.sn')" align="center" prop="showSn" />
          <el-table-column :label="$t('page.system.template.name')" align="center">
            <template slot-scope="scope">
              <span v-if="$i18n.locale === 'zh_CN'">{{ scope.row.name }}</span>
              <span v-else>{{ scope.row.nameEn }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.system.template.department')" align="center" prop="deptName"
            width="150px" />
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
          @pagination="getList" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">{{ $t('form.cancel') }}</el-button>
        <el-button type="primary" :disabled="!(this.selectedId && this.selectedId !== '')" @click="handleSelect">{{
          $t('form.saveConfirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { public_templateList } from "@/api/business/public/public";
import SelectDept from "@/views/business/comps/select/SelectDept";
export default {
  name: "SelectTemplateDialog",
  components: { SelectDept },
  props: {
  },
  watch: {
  },
  data() {
    return {
      selectedId: null,
      loading: false,
      open: false,
      total: 0,
      list: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        sn: '',
        name: '',
        deptId: null,
        status: '',
      }
    };
  },
  mounted() {
  },
  methods: {
    handleRadioClick(row) {
      this.selectedId = row.id
    },
    show(val) {
      this.searchForm.deptId=val.selectedDeptId
      this.searchForm = _.merge({}, this.searchForm, val)
      this.selectedId = null
      this.search()
    },
    search() {
      this.searchForm.pageNum = 1;
      this.open = true
      this.selectedId = null
      this.getList();
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        sn: '',
        name: '',
        deptId: null,
        status: '',
      }
      this.search()
    },
    getList() {
      public_templateList(this.searchForm).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false
      })
    },
    handleSelect() {
      let that = this
      let _index = _.findIndex(this.list, function (item) { return item.id == that.selectedId })
      this.$emit('callback', this.list[_index]);
      this.open = false
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.select-template {}
</style>