You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.2 KiB
125 lines
4.2 KiB
<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>
|