{"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"]}]}