123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 |
- <template>
- <div class="">
- <div class="filter-container">
- <el-button size="small" class="filter-item" style="float:right;" @click="handleCreate" type="primary" icon="el-icon-circle-plus-outline">{{$t('table.add')}}</el-button>
- </div>
- <el-table :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row style="width: 100%;min-height:500px;">
- <!-- <el-table-column align="center" :label="$t('table.id')" width="65" @click="handleUpdate(scope.row)">
- <template slot-scope="scope">
- <span>{{scope.row.id}}</span>
- </template>
- </el-table-column> -->
- <el-table-column align="center" label="标题">
- <template slot-scope="scope">
- <!-- <span @click="handleUpdate(scope.row)">{{scope.row.name}}</span> -->
- <span >{{scope.row.title}}</span>
- </template>
- </el-table-column>
- <el-table-column align="center" label="内容">
- <template slot-scope="scope">
- <span>{{scope.row.content}}</span>
- </template>
- </el-table-column>
- <el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
- <template slot-scope="scope">
- <el-tooltip class="item" effect="dark" content="编辑" placement="top">
- <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleUpdate(scope.row)"></el-button>
- </el-tooltip>
- <el-tooltip class="item" effect="dark" content="删除" placement="top">
- <el-button icon="el-icon-delete" v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">
- </el-button>
- </el-tooltip>
-
-
- </template>
- </el-table-column>
- </el-table>
-
- <!-- <div class="pagination-container">
- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
- </el-pagination>
- </div> -->
-
- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
- <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="70px" >
- <el-form-item label="标题" prop="title">
- <el-input v-model="temp.title" maxlength="100" placeholder="请输入标题"></el-input>
- </el-form-item>
- <el-form-item label="内容" prop="content">
- <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="temp.content" placeholder="请输入内容"></el-input>
- </el-form-item>
- <el-form-item :label="$t('data_config.remark')">
- <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入备注" v-model="temp.remark"></el-input>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
- <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
- <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
- </div>
- </el-dialog>
-
- <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
- <el-table :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="pvData" border fit highlight-current-row style="width: 100%">
- <el-table-column prop="key" label="Channel"> </el-table-column>
- <el-table-column prop="pv" label="Pv"> </el-table-column>
- </el-table>
- <span slot="footer" class="dialog-footer">
- <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
- </span>
- </el-dialog>
-
- </div>
- </template>
-
- <script>
- import {createConfig,createChildConfig,updateChildConfig, deleteChildConfig,updateTemplate} from '@/api/data'
- import waves from '@/directive/waves' // 水波纹指令
- import { parseTime } from '@/utils'
- import store from '@/store'
- import bus from '@/assets/eventBus'
-
-
- export default {
- name: 'complexTable',
- directives: {
- waves
- },
- props: {
- type: {
- type: String,
- default: 'patient'
- }
- },
- data() {
- return {
- currentId: undefined,
- tableKey: 0,
- // list: null,
- total: null,
- listLoading: true,
- listQuery: {
- page: 1,
- limit: 20,
- importance: undefined,
- title: undefined,
- type: this.type,
- sort: '+id'
- },
- importanceOptions: [1, 2, 3],
- // calendarTypeOptions,
- sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
- statusOptions: ['published', 'draft', 'deleted'],
- showReviewer: false,
- temp: {
- id: undefined,
- parent_id: 0,
- module: this.type,
- org_id:0,
- title: '',
- content: '',
- remark: ''
- },
- dialogFormVisible: false,
- dialogStatus: '',
- textMap: {
- update: '修改',
- create: '新增'
- },
- dialogPvVisible: false,
- pvData: [],
- rules: {
- title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
- content: [{ required: true, message: '请输入字段名', trigger: 'blur' }]
- },
- downloadLoading: false
- }
- },
- // watch: {
- // 'temp.config_field':function(){
- // this.temp.config_field = this.temp.config_field.replace(/[^A-Za-z]/g,'');
- // }
- // },
- computed:{
- list: function() {
- // const list = store.getters.configlist[this.type]
- // this.total = list.length
- return store.getters.configlist[this.type]
- }
- },
- filters: {
- statusFilter(status) {
- const statusMap = {
- published: 'success',
- draft: 'info',
- deleted: 'danger'
- }
- return statusMap[status]
- },
- typeFilter(type) {
- return calendarTypeKeyValue[type]
- }
- },
- created() {
- this.getList()
- },
- methods: {
- fieldChange:function(newValue){
- this.temp.config_field = newValue.replace(/[^A-Za-z]/g,'');
- },
- handleRowChange(currentRow, oldCurrentRow){
- if(currentRow != undefined){
- this.currentId = currentRow.id
- bus.$emit('parentChangeId',currentRow)
- }
- },
- getList() {
- this.listLoading = false
- // setTimeout(() => {
- // this.listLoading = false
- // }, 1 * 1000)
- },
- handleFilter() {
- this.listQuery.page = 1
- this.getList()
- },
- handleSizeChange(val) {
- this.listQuery.limit = val
- this.getList()
- },
- handleCurrentChange(val) {
- this.listQuery.page = val
- this.getList()
- },
- handleModifyStatus(row, status) {
- this.temp = Object.assign({}, row); // copy obj
- this.$confirm("此操作将永久删除该配置项, 是否继续?", "提示", {
- confirmButtonText: "确 定",
- cancelButtonText: "取 消",
- type: "warning"
- }).then(() => {
- const tempData = Object.assign({}, this.temp);
- deleteChildConfig(tempData).then(response => {
- if (!response.data) {
- // 由于mockjs 不支持自定义状态码只能这样hack
- reject("error");
- }
- if (response.data.state === 0) {
- this.$message.error(response.data.msg);
- }
-
- const result = response.data.data.dataconfig;
- store.dispatch("updateParentConfigList", [tempData, "delete"]).then(() => {
- next();
- });
- });
-
- this.$message({
- type: "success",
- message: "删除成功!"
- });
- })
- .catch(() => {
- this.$message({
- type: "info",
- message: "已取消删除"
- });
- });
- },
- resetTemp() {
- this.temp = {
- id: undefined,
- parent_id: 0,
- module: this.type,
- org_id:0,
- title: '',
- content: '',
- remark: ''
- }
- },
- handleCreate() {
- this.resetTemp()
- this.dialogStatus = 'create'
- this.dialogFormVisible = true
- this.$nextTick(() => {
- this.$refs['dataForm'].clearValidate()
- })
- },
- createData() {
- this.$refs['dataForm'].validate((valid) => {
- if (valid) {
- createConfig(this.temp).then(response => {
- if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
- reject('error')
- }
- if (response.data.state === 0) {
- this.$message.error(response.data.msg);
- }
- const result = response.data.data.dataconfig
- // 更新store
- store.dispatch('updateConfigList',result).then(() => {
-
- })
-
- this.dialogFormVisible = false
-
- this.$message.success("创建成功")
- })
- }
- })
- },
- handleUpdate(row) {
- this.temp = Object.assign({}, row); // copy obj
- this.dialogStatus = "update";
- this.dialogFormVisible = true;
- this.$nextTick(() => {
- this.$refs["dataForm"].clearValidate();
- });
- },
- updateData() {
- this.$refs["dataForm"].validate(valid => {
- if (valid) {
- const tempData = Object.assign({}, this.temp);
- updateTemplate(tempData).then(response => {
- if (!response.data) {
- // 由于mockjs 不支持自定义状态码只能这样hack
- reject("error");
- }
- if (response.data.state === 0) {
- this.$message.error(response.data.msg);
- }
-
- const result = response.data.data.dataconfig;
- store.dispatch("updateParentConfigList", [result, "update"]).then(() => {
- next();
- });
-
- this.dialogFormVisible = false;
-
- this.$message.success("更新成功")
- });
- }
- });
- },
- handleDelete(row) {
-
- this.$message.success("删除成功")
-
- const index = this.list.indexOf(row)
- this.list.splice(index, 1)
- },
- handleFetchPv(pv) {
- fetchPv(pv).then(response => {
- this.pvData = response.data.pvData
- this.dialogPvVisible = true
- })
- },
- handleDownload() {
- this.downloadLoading = true
- import('@/vendor/Export2Excel').then(excel => {
- const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
- const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
- const data = this.formatJson(filterVal, this.list)
- excel.export_json_to_excel({
- header: tHeader,
- data,
- filename: 'table-list'
- })
- this.downloadLoading = false
- })
- },
- formatJson(filterVal, jsonData) {
- return jsonData.map(v => filterVal.map(j => {
- if (j === 'timestamp') {
- return parseTime(v[j])
- } else {
- return v[j]
- }
- }))
- }
- }
- }
- </script>
|