血透系统PC前端

templateTable.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. <template>
  2. <div class="">
  3. <div class="filter-container">
  4. <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>
  5. </div>
  6. <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;">
  7. <!-- <el-table-column align="center" :label="$t('table.id')" width="65" @click="handleUpdate(scope.row)">
  8. <template slot-scope="scope">
  9. <span>{{scope.row.id}}</span>
  10. </template>
  11. </el-table-column> -->
  12. <el-table-column align="center" label="标题">
  13. <template slot-scope="scope">
  14. <!-- <span @click="handleUpdate(scope.row)">{{scope.row.name}}</span> -->
  15. <span >{{scope.row.title}}</span>
  16. </template>
  17. </el-table-column>
  18. <el-table-column align="center" label="内容">
  19. <template slot-scope="scope">
  20. <span>{{scope.row.content}}</span>
  21. </template>
  22. </el-table-column>
  23. <el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
  24. <template slot-scope="scope">
  25. <el-tooltip class="item" effect="dark" content="编辑" placement="top">
  26. <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleUpdate(scope.row)"></el-button>
  27. </el-tooltip>
  28. <el-tooltip class="item" effect="dark" content="删除" placement="top">
  29. <el-button icon="el-icon-delete" v-if="scope.row.status!='deleted'" size="small" type="danger" @click="handleModifyStatus(scope.row,'deleted')">
  30. </el-button>
  31. </el-tooltip>
  32. </template>
  33. </el-table-column>
  34. </el-table>
  35. <!-- <div class="pagination-container">
  36. <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">
  37. </el-pagination>
  38. </div> -->
  39. <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  40. <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="70px" >
  41. <el-form-item label="标题" prop="title">
  42. <el-input v-model="temp.title" maxlength="100" placeholder="请输入标题"></el-input>
  43. </el-form-item>
  44. <el-form-item label="内容" prop="content">
  45. <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-model="temp.content" placeholder="请输入内容"></el-input>
  46. </el-form-item>
  47. <el-form-item :label="$t('data_config.remark')">
  48. <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入备注" v-model="temp.remark"></el-input>
  49. </el-form-item>
  50. </el-form>
  51. <div slot="footer" class="dialog-footer">
  52. <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
  53. <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
  54. <el-button v-else type="primary" @click="updateData">{{$t('table.confirm')}}</el-button>
  55. </div>
  56. </el-dialog>
  57. <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
  58. <el-table :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="pvData" border fit highlight-current-row style="width: 100%">
  59. <el-table-column prop="key" label="Channel"> </el-table-column>
  60. <el-table-column prop="pv" label="Pv"> </el-table-column>
  61. </el-table>
  62. <span slot="footer" class="dialog-footer">
  63. <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
  64. </span>
  65. </el-dialog>
  66. </div>
  67. </template>
  68. <script>
  69. import {createConfig,createChildConfig,updateChildConfig, deleteChildConfig,updateTemplate} from '@/api/data'
  70. import waves from '@/directive/waves' // 水波纹指令
  71. import { parseTime } from '@/utils'
  72. import store from '@/store'
  73. import bus from '@/assets/eventBus'
  74. export default {
  75. name: 'complexTable',
  76. directives: {
  77. waves
  78. },
  79. props: {
  80. type: {
  81. type: String,
  82. default: 'patient'
  83. }
  84. },
  85. data() {
  86. return {
  87. currentId: undefined,
  88. tableKey: 0,
  89. // list: null,
  90. total: null,
  91. listLoading: true,
  92. listQuery: {
  93. page: 1,
  94. limit: 20,
  95. importance: undefined,
  96. title: undefined,
  97. type: this.type,
  98. sort: '+id'
  99. },
  100. importanceOptions: [1, 2, 3],
  101. // calendarTypeOptions,
  102. sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
  103. statusOptions: ['published', 'draft', 'deleted'],
  104. showReviewer: false,
  105. temp: {
  106. id: undefined,
  107. parent_id: 0,
  108. module: this.type,
  109. org_id:0,
  110. title: '',
  111. content: '',
  112. remark: ''
  113. },
  114. dialogFormVisible: false,
  115. dialogStatus: '',
  116. textMap: {
  117. update: '修改',
  118. create: '新增'
  119. },
  120. dialogPvVisible: false,
  121. pvData: [],
  122. rules: {
  123. title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  124. content: [{ required: true, message: '请输入字段名', trigger: 'blur' }]
  125. },
  126. downloadLoading: false
  127. }
  128. },
  129. // watch: {
  130. // 'temp.config_field':function(){
  131. // this.temp.config_field = this.temp.config_field.replace(/[^A-Za-z]/g,'');
  132. // }
  133. // },
  134. computed:{
  135. list: function() {
  136. // const list = store.getters.configlist[this.type]
  137. // this.total = list.length
  138. return store.getters.configlist[this.type]
  139. }
  140. },
  141. filters: {
  142. statusFilter(status) {
  143. const statusMap = {
  144. published: 'success',
  145. draft: 'info',
  146. deleted: 'danger'
  147. }
  148. return statusMap[status]
  149. },
  150. typeFilter(type) {
  151. return calendarTypeKeyValue[type]
  152. }
  153. },
  154. created() {
  155. this.getList()
  156. },
  157. methods: {
  158. fieldChange:function(newValue){
  159. this.temp.config_field = newValue.replace(/[^A-Za-z]/g,'');
  160. },
  161. handleRowChange(currentRow, oldCurrentRow){
  162. if(currentRow != undefined){
  163. this.currentId = currentRow.id
  164. bus.$emit('parentChangeId',currentRow)
  165. }
  166. },
  167. getList() {
  168. this.listLoading = false
  169. // setTimeout(() => {
  170. // this.listLoading = false
  171. // }, 1 * 1000)
  172. },
  173. handleFilter() {
  174. this.listQuery.page = 1
  175. this.getList()
  176. },
  177. handleSizeChange(val) {
  178. this.listQuery.limit = val
  179. this.getList()
  180. },
  181. handleCurrentChange(val) {
  182. this.listQuery.page = val
  183. this.getList()
  184. },
  185. handleModifyStatus(row, status) {
  186. this.temp = Object.assign({}, row); // copy obj
  187. this.$confirm("此操作将永久删除该配置项, 是否继续?", "提示", {
  188. confirmButtonText: "确 定",
  189. cancelButtonText: "取 消",
  190. type: "warning"
  191. }).then(() => {
  192. const tempData = Object.assign({}, this.temp);
  193. deleteChildConfig(tempData).then(response => {
  194. if (!response.data) {
  195. // 由于mockjs 不支持自定义状态码只能这样hack
  196. reject("error");
  197. }
  198. if (response.data.state === 0) {
  199. this.$message.error(response.data.msg);
  200. }
  201. const result = response.data.data.dataconfig;
  202. store.dispatch("updateParentConfigList", [tempData, "delete"]).then(() => {
  203. next();
  204. });
  205. });
  206. this.$message({
  207. type: "success",
  208. message: "删除成功!"
  209. });
  210. })
  211. .catch(() => {
  212. this.$message({
  213. type: "info",
  214. message: "已取消删除"
  215. });
  216. });
  217. },
  218. resetTemp() {
  219. this.temp = {
  220. id: undefined,
  221. parent_id: 0,
  222. module: this.type,
  223. org_id:0,
  224. title: '',
  225. content: '',
  226. remark: ''
  227. }
  228. },
  229. handleCreate() {
  230. this.resetTemp()
  231. this.dialogStatus = 'create'
  232. this.dialogFormVisible = true
  233. this.$nextTick(() => {
  234. this.$refs['dataForm'].clearValidate()
  235. })
  236. },
  237. createData() {
  238. this.$refs['dataForm'].validate((valid) => {
  239. if (valid) {
  240. createConfig(this.temp).then(response => {
  241. if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
  242. reject('error')
  243. }
  244. if (response.data.state === 0) {
  245. this.$message.error(response.data.msg);
  246. }
  247. const result = response.data.data.dataconfig
  248. // 更新store
  249. store.dispatch('updateConfigList',result).then(() => {
  250. })
  251. this.dialogFormVisible = false
  252. this.$message.success("创建成功")
  253. })
  254. }
  255. })
  256. },
  257. handleUpdate(row) {
  258. this.temp = Object.assign({}, row); // copy obj
  259. this.dialogStatus = "update";
  260. this.dialogFormVisible = true;
  261. this.$nextTick(() => {
  262. this.$refs["dataForm"].clearValidate();
  263. });
  264. },
  265. updateData() {
  266. this.$refs["dataForm"].validate(valid => {
  267. if (valid) {
  268. const tempData = Object.assign({}, this.temp);
  269. updateTemplate(tempData).then(response => {
  270. if (!response.data) {
  271. // 由于mockjs 不支持自定义状态码只能这样hack
  272. reject("error");
  273. }
  274. if (response.data.state === 0) {
  275. this.$message.error(response.data.msg);
  276. }
  277. const result = response.data.data.dataconfig;
  278. store.dispatch("updateParentConfigList", [result, "update"]).then(() => {
  279. next();
  280. });
  281. this.dialogFormVisible = false;
  282. this.$message.success("更新成功")
  283. });
  284. }
  285. });
  286. },
  287. handleDelete(row) {
  288. this.$message.success("删除成功")
  289. const index = this.list.indexOf(row)
  290. this.list.splice(index, 1)
  291. },
  292. handleFetchPv(pv) {
  293. fetchPv(pv).then(response => {
  294. this.pvData = response.data.pvData
  295. this.dialogPvVisible = true
  296. })
  297. },
  298. handleDownload() {
  299. this.downloadLoading = true
  300. import('@/vendor/Export2Excel').then(excel => {
  301. const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
  302. const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
  303. const data = this.formatJson(filterVal, this.list)
  304. excel.export_json_to_excel({
  305. header: tHeader,
  306. data,
  307. filename: 'table-list'
  308. })
  309. this.downloadLoading = false
  310. })
  311. },
  312. formatJson(filterVal, jsonData) {
  313. return jsonData.map(v => filterVal.map(j => {
  314. if (j === 'timestamp') {
  315. return parseTime(v[j])
  316. } else {
  317. return v[j]
  318. }
  319. }))
  320. }
  321. }
  322. }
  323. </script>