| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\crud\\index.vue?vue&type=style&index=0&id=6644f3c5&scoped=true&lang=scss","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\crud\\index.vue","mtime":1761614939010},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoudGFiQm94X2ltZyB7DQogIHdpZHRoOiAzNnB4Ow0KICBoZWlnaHQ6IDM2cHg7DQogIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICBtYXJnaW46IDFweDsNCg0KICBpbWcgew0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogMTAwJTsNCiAgfQ0KfQ0KDQouZnJhbWUtaW1hZ2VzIHsNCiAgZGlzcGxheTogZmxleDsNCiAgZmxleC13cmFwOiB3cmFwOw0KfQ0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AA0XA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/pages/crud","sourcesContent":["<template>\r\n <div>\r\n <el-card shadow=\"never\" class=\"ivu-mt\" :body-style=\"{ padding: 0 }\">\r\n <div class=\"padding-add\">\r\n <el-form\r\n v-if=\"search.length\"\r\n ref=\"curlFrom\"\r\n :model=\"from\"\r\n :label-width=\"labelWidth\"\r\n :label-position=\"labelPosition\"\r\n inline\r\n @submit.native.prevent\r\n >\r\n <el-form-item :label=\"item.name + ':'\" v-for=\"(item, index) in search\" :key=\"index\">\r\n <el-input\r\n v-if=\"item.type === 'input'\"\r\n v-model=\"from[item.field]\"\r\n :placeholder=\"'请输入' + item.name\"\r\n class=\"form_content_width\"\r\n @input=\"change($event)\"\r\n />\r\n <el-date-picker\r\n v-else-if=\"item.type === 'date-picker'\"\r\n :editable=\"false\"\r\n clearabl\r\n @change=\"searchs\"\r\n v-model=\"from[item.field]\"\r\n format=\"yyyy/MM/dd\"\r\n type=\"daterange\"\r\n value-format=\"yyyy/MM/dd\"\r\n start-placeholder=\"开始日期\"\r\n end-placeholder=\"结束日期\"\r\n style=\"width: 250px\"\r\n ></el-date-picker>\r\n <el-select\r\n v-else-if=\"item.type === 'select'\"\r\n v-model=\"from[item.field]\"\r\n placeholder=\"请选择\"\r\n clearable\r\n @change=\"searchs\"\r\n class=\"form_content_width\"\r\n >\r\n <el-option v-for=\"(val, i) in item.option\" :value=\"val.value\" :label=\"val.label\" :key=\"i\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n <!-- <template v-for=\"(item, index) in search\">\r\n <el-form-item :label=\"item.name + ':'\" label-for=\"name\" v-if=\"item.type === 'input'\" :key=\"index\">\r\n <el-input v-model=\"from[item.field]\" :placeholder=\"'请输入' + item.name\" class=\"form_content_width\"/>\r\n </el-form-item>\r\n <el-form-item :label=\"item.name + ':'\" v-else-if=\"item.type === 'date-picker'\" :key=\"index\">\r\n <el-date-picker\r\n :editable=\"false\"\r\n clearabl\r\n @change=\"searchs\"\r\n v-model=\"from[item.field]\"\r\n format=\"yyyy/MM/dd\"\r\n type=\"daterange\"\r\n value-format=\"yyyy/MM/dd\"\r\n start-placeholder=\"开始日期\"\r\n end-placeholder=\"结束日期\"\r\n style=\"width: 250px\"\r\n ></el-date-picker>\r\n </el-form-item>\r\n <el-form-item\r\n :label=\"item.name + ':'\"\r\n :label-for=\"item.field\"\r\n v-else-if=\"item.type === 'select'\"\r\n :key=\"index\"\r\n >\r\n <el-select\r\n v-model=\"from[item.field]\"\r\n placeholder=\"请选择\"\r\n clearable\r\n @change=\"searchs\"\r\n class=\"form_content_width\"\r\n >\r\n <el-option v-for=\"(val, i) in item.option\" :value=\"val.value\" :label=\"val.label\" :key=\"i\"></el-option>\r\n </el-select>\r\n </el-form-item>\r\n </template> -->\r\n <el-form-item>\r\n <el-button type=\"primary\" v-db-click @click=\"searchs\">查询</el-button>\r\n </el-form-item>\r\n </el-form>\r\n </div>\r\n </el-card>\r\n <el-card shadow=\"never\" class=\"ivu-mt\" :class=\"search.length ? 'mt16' : ''\">\r\n <el-row>\r\n <el-col v-bind=\"grid\">\r\n <el-button type=\"primary\" v-db-click @click=\"add\">添加</el-button>\r\n </el-col>\r\n </el-row>\r\n <el-table\r\n :data=\"dataList\"\r\n ref=\"table\"\r\n class=\"mt14\"\r\n v-loading=\"loading\"\r\n no-userFrom-text=\"暂无数据\"\r\n no-filtered-userFrom-text=\"暂无筛选结果\"\r\n >\r\n <el-table-column :label=\"item.title\" :min-width=\"item.minWidth\" v-for=\"(item, index) in columns\" :key=\"index\">\r\n <template slot-scope=\"scope\">\r\n <template v-if=\"item.key\">\r\n <span>{{ scope.row[item.key] }}</span>\r\n </template>\r\n <template v-else-if=\"item.from_type == 'frameImageOne'\">\r\n <div class=\"tabBox_img\" v-viewer>\r\n <img v-lazy=\"scope.row[item.slot]\" />\r\n </div>\r\n </template>\r\n <template v-else-if=\"item.from_type == 'frameImages'\">\r\n <div class=\"frame-images\">\r\n <div class=\"tabBox_img\" v-viewer v-for=\"(item, index) in scope.row[item.slot]\" :key=\"index\">\r\n <img v-lazy=\"item\" />\r\n </div>\r\n </div>\r\n </template>\r\n <template v-else-if=\"item.from_type == 'dateTimeRange'\">\r\n <span>{{ scope.row[item.slot][0] }}--{{ scope.row[item.slot][1] }}</span>\r\n </template>\r\n <template v-else-if=\"item.slot === 'action'\">\r\n <a v-db-click @click=\"show(scope.row)\">详情</a>\r\n <el-divider direction=\"vertical\" />\r\n <a v-db-click @click=\"edit(scope.row)\">修改</a>\r\n <el-divider direction=\"vertical\"></el-divider>\r\n <a v-db-click @click=\"del(scope.row, '删除', scope.$index)\">删除</a>\r\n </template>\r\n <template v-else-if=\"item.from_type === 'switches'\">\r\n <el-switch\r\n :active-value=\"1\"\r\n :inactive-value=\"0\"\r\n v-model=\"scope.row[item.slot]\"\r\n :value=\"scope.row[item.slot]\"\r\n size=\"large\"\r\n @change=\"onchangeIsShow(scope.row, item.slot)\"\r\n >\r\n </el-switch>\r\n </template>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <div class=\"acea-row row-right page\">\r\n <pagination v-if=\"total\" :total=\"total\" :page.sync=\"from.page\" :limit.sync=\"from.limit\" @pagination=\"getList\" />\r\n </div>\r\n </el-card>\r\n\r\n <el-dialog title=\"查看详情\" :visible.sync=\"dialogTableVisible\" v-if=\"dialogTableVisible\">\r\n <el-descriptions :title=\"readFields.name\">\r\n <el-descriptions-item :label=\"item.comment\" v-for=\"(item, index) in readFields.all\" :key=\"index\">\r\n <div v-if=\"item.from_type == 'frameImageOne'\">\r\n <div class=\"tabBox_img\" v-viewer>\r\n <img v-lazy=\"info[item.field]\" />\r\n </div>\r\n </div>\r\n <div v-else-if=\"item.from_type == 'frameImages'\">\r\n <div class=\"frame-images\">\r\n <div class=\"tabBox_img\" v-viewer v-for=\"(item, index) in info[item.field]\" :key=\"index\">\r\n <img v-lazy=\"item\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div v-else-if=\"item.from_type == 'dateTimeRange'\">\r\n <span>{{ info[item.field][0] }}--{{ info[item.field][1] }}</span>\r\n </div>\r\n <div v-else>{{ info[item.field] }}</div>\r\n </el-descriptions-item>\r\n </el-descriptions>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport { crudApi, getList, getCreateApi, getStatusApi, getEditApi } from '@/api/crud.js';\r\n\r\nexport default {\r\n name: 'crud_index',\r\n data() {\r\n return {\r\n grid: {\r\n xl: 7,\r\n lg: 7,\r\n md: 12,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n loading: false,\r\n columns: [],\r\n readFields: {\r\n name: '',\r\n all: [],\r\n },\r\n from: {\r\n page: 1,\r\n limit: 15,\r\n },\r\n dataList: [],\r\n total: 0,\r\n methodApi: {},\r\n curdKey: '',\r\n dialogTableVisible: false,\r\n info: {},\r\n search: [],\r\n };\r\n },\r\n computed: {\r\n ...mapState('media', ['isMobile']),\r\n labelWidth() {\r\n return this.isMobile ? undefined : '80px';\r\n },\r\n labelPosition() {\r\n return this.isMobile ? 'top' : 'right';\r\n },\r\n },\r\n beforeRouteUpdate(to, from, next) {\r\n this.from.page = 1;\r\n this.getCrudApi(to.params.table_name);\r\n next();\r\n },\r\n created() {\r\n this.getCrudApi(this.$route.params.table_name);\r\n },\r\n methods: {\r\n show(row) {\r\n let url = this.methodApi.read.replace('<id>', row.id);\r\n getCreateApi(url)\r\n .then((res) => {\r\n this.dialogTableVisible = true;\r\n this.info = res.data;\r\n })\r\n .catch((res) => {\r\n this.$Message.error(res.msg);\r\n });\r\n },\r\n onchangeIsShow(row, field) {\r\n let url = this.methodApi.status.replace('<id>', row.id);\r\n getStatusApi(url, { field: field, value: row[field] })\r\n .then(async (res) => {\r\n this.$message.success(res.msg);\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 表格搜索\r\n searchs() {\r\n this.from.page = 1;\r\n this.getList();\r\n },\r\n change(e) {\r\n this.$forceUpdate();\r\n },\r\n getCrudApi(tableName) {\r\n crudApi(tableName).then((res) => {\r\n this.methodApi = res.data.route;\r\n this.curdKey = res.data.key;\r\n this.readFields = res.data.readFields;\r\n res.data.search.map((item) => {\r\n this.from[item.field] = '';\r\n });\r\n this.search = res.data.search;\r\n res.data.columns.push({\r\n title: '操作',\r\n slot: 'action',\r\n fixed: 'right',\r\n width: 100,\r\n align: 'center',\r\n });\r\n res.data.columns.map((item) => {\r\n if (item.from_type === 'frameImageOne') {\r\n item.render = (h, params) => {\r\n return h(\r\n 'div',\r\n {\r\n class: 'tabBox_img',\r\n directives: [\r\n {\r\n name: 'viewer',\r\n },\r\n ],\r\n },\r\n [\r\n h('img', {\r\n directives: [\r\n {\r\n name: 'lazy',\r\n value: params.row[item.slot],\r\n },\r\n ],\r\n }),\r\n ],\r\n );\r\n };\r\n } else if (item.from_type === 'frameImages') {\r\n item.render = (h, params) => {\r\n let image = params.row[item.slot] || [];\r\n let imageH = [];\r\n image.map((item) => {\r\n imageH.push(\r\n h('img', {\r\n directives: [\r\n {\r\n name: 'lazy',\r\n value: item,\r\n },\r\n ],\r\n }),\r\n );\r\n });\r\n return h(\r\n 'div',\r\n {\r\n class: 'tabBox_img',\r\n directives: [\r\n {\r\n name: 'viewer',\r\n },\r\n ],\r\n },\r\n imageH,\r\n );\r\n };\r\n }\r\n });\r\n this.columns = res.data.columns;\r\n this.getList();\r\n });\r\n },\r\n // 添加\r\n add() {\r\n let url = this.methodApi.create;\r\n this.$modalForm(getCreateApi(url)).then(() => this.getList());\r\n },\r\n //列表\r\n getList() {\r\n this.loading = true;\r\n let url = this.methodApi.index;\r\n getList(url, this.from)\r\n .then(async (res) => {\r\n let data = res.data;\r\n this.dataList = data.list;\r\n this.total = data.count;\r\n this.loading = false;\r\n })\r\n .catch((res) => {\r\n this.loading = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 修改\r\n edit(row) {\r\n let url = this.methodApi.edit.replace('<id>', row[this.curdKey]);\r\n this.$modalForm(getEditApi(url)).then(() => this.getList());\r\n },\r\n // 删除\r\n del(row, tit, num) {\r\n let url = this.methodApi.delete.replace('<id>', row[this.curdKey]);\r\n let delfromData = {\r\n title: tit,\r\n num: num,\r\n url: url,\r\n method: 'DELETE',\r\n ids: '',\r\n };\r\n this.$modalSure(delfromData)\r\n .then((res) => {\r\n this.$message.success(res.msg);\r\n this.getList();\r\n })\r\n .catch((res) => {\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.tabBox_img {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n margin: 1px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n }\r\n}\r\n\r\n.frame-images {\r\n display: flex;\r\n flex-wrap: wrap;\r\n}\r\n</style>\r\n"]}]}
|
