123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- <template>
- <template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents" :operationColumnWidth="80"
- :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters" :column-parsing="columnParsing"
- :operation="operation()">
- <el-dialog title="" width="500px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
- :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
- <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
- <zj-form-module :title="formDialogTitles[formDialogType]" label-width="100px" :showPackUp="false"
- :form-data="formData" :form-items="formItems" :disabled="formDialogType==2">
- </zj-form-module>
- </zj-form-container>
- <div slot="footer" class="dialog-footer">
- <el-button size="mini" @click="formCancel">取 消</el-button>
- <el-button size="mini" v-if="formDialogType !== 2" type="primary" @click="formConfirm()">确定</el-button>
- </div>
- </el-dialog>
- </template-page>
- </template>
- <script>
- import TemplatePage from '@/components/template/template-page-1.vue'
- import import_mixin from '@/components/template/import_mixin.js'
- import ImageUpload from '@/components/file-upload'
- import operation_mixin from '@/components/template/operation_mixin.js'
- import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
- import { listPageV2,pageExport, getDetail, save } from "@/api/workOrder/basicData";
- export default {
- components: { TemplatePage, ImageUpload },
- mixins: [import_mixin, operation_mixin],
- data() {
- return {
- // 事件组合
- optionsEvensGroup: [
- [
- [
- {
- name: '新建',
- click: this.addData
- }
- ],
- ],
- ],
- // 表格属性
- tableAttributes: {
- // 启用勾选列
- selectColumn: false
- },
- // 表格事件
- tableEvents: {
- 'selection-change': this.selectionChange
- },
- // 勾选选中行
- recordSelected: [],
- /** 表单变量 */
- formDialogType: 0,
- formDialogTitles: ["新增","编辑", "详情"],
- formDialog: false,
- formData: {
- companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
- orderSmallTypeText: '',
- orderType: '',
- status: true,
- sortNum: '',
- imgUrl: []
- }
- }
- },
- computed: {
- // 更多参数
- moreParameters() {
- return []
- },
- // 事件组合
- optionsEvensGroup() {
- return [
- [
- [
- this.optionsEvensAuth("add", {
- click: () => {
-
- }
- })
- ],
- ]
- ]
- },
- formItems() {
- return [{
- md: 24,
- isShow: true,
- name: 'el-input',
- attributes: { placeholder: '请输入', disabled: true },
- formItemAttributes: {
- label: '所属商户',
- prop: 'companyName',
- rules: [...required]
- },
- }, {
- md: 24,
- isShow: true,
- name: 'el-select',
- options: [{label: '安装',value: 'INSTALL'},{label: '维修',value: 'REPAIR'}],
- attributes: { placeholder: '请选择' },
- formItemAttributes: {
- label: '所属业务线',
- prop: 'orderType',
- rules: [...required]
- },
- }, {
- md: 24,
- isShow: true,
- name: 'el-input',
- attributes: { placeholder: '请输入工单类型', },
- formItemAttributes: {
- label: '工单类型',
- prop: 'orderSmallTypeText',
- rules: [...required]
- }
- },{
- md: 24,
- isShow: true,
- name: 'slot-component',
- attributes: { },
- formItemAttributes: {
- label: '状态',
- prop: 'status',
- rules: [...required]
- },
- render: (h, { props, onInput }) => {
- var { value } = props
- return (
- <el-radio-group v-model={this.formData.status}>
- <el-radio disabled={this.formDialogType==2} label={true}>启用</el-radio>
- <el-radio disabled={this.formDialogType==2} label={false}>禁用</el-radio>
- </el-radio-group>
- )
- }
- }, {
- md: 24,
- isShow: true,
- name: 'el-input',
- attributes: { placeholder: '排序数字越小越靠前', type: 'number' },
- formItemAttributes: {
- label: '排序',
- prop: 'sortNum',
- rules: []
- }
- }, {
- md: 24,
- isShow: true,
- name: 'slot-component',
- formItemAttributes: {
- label: '上传图片',
- prop: 'imgUrl',
- rules: [...required]
- },
- render: (h, { props, onInput }) => {
- var { value } = props
- return (
- <div>
- <ImageUpload fileList={this.formData.imgUrl} fileType={['image']} limit={1} isEdit={this.formDialogType !== 2} />
- <div style="color: #EA8000">上传后在小程序首页自助服务展示</div>
- </div>
- )
- }
- }]
- }
- },
- methods: {
- // 列表请求函数
- getList: listPageV2,
- // 列表导出函数
- exportList: pageExport,
- // 表格列解析渲染数据更改
- columnParsing(item, defaultData) {
- if (item.jname === 'imgUrl') {
- defaultData.render = (h, { row, index, column }) => {
- return (
- <div style="padding:0 6px;cursor: pointer;">
- {row.imgUrl ? row.imgUrl.split(",").map(url => <el-image src={url} preview-src-list={[url]} fit="cover" style="width:80px;height:80px;" />) : null}
- </div>
- )
- }
- }
- return defaultData
- },
- // 监听勾选变化
- selectionChange(data) {
- this.recordSelected = data
- },
- // 表格操作列
- operation() {
- return this.operationBtn({
- edit: {
- click: ({ row, index, column }) => {
- getDetail({ id: row.id }).then(res => {
- Object.assign(this.formData, res.data,{
- imgUrl:res.data?.imgUrl? res.data?.imgUrl?.split(",").map(item=>({url:item})) : []
- })
- console.log(this.formData)
- this.formDialogType = 1
- this.openForm()
- })
- }
- },
- detail: {
- click: ({ row, index, column }) => {
- getDetail({ id: row.id }).then(res => {
- Object.assign(this.formData, res.data,{
- imgUrl:res.data?.imgUrl? res.data?.imgUrl?.split(",").map(item=>({url:item})) : []
- })
- console.log(this.formData)
- this.formDialogType = 2
- this.openForm()
- })
- }
- },
- expenseApply: {
- click: ({ row, index, column }) => {
-
- }
- },
- serviceOrderDetail: {
- click: ({ row, index, column }) => {
-
- }
- }
- })
- },
- addData() {
- this.formDialogType = 0
- this.openForm()
- },
- openForm() {
- this.formDialog = true;
- },
- formCancel() {
- this.$refs.formRef.$refs.inlineForm.clearValidate()
- this.$data.formData = this.$options.data().formData
- this.formDialog = false
- },
- formConfirm() {
- this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
- if (valid) {
- (save)({
- ...this.formData,
- imgUrl:this.formData.imgUrl.map(item=>item.url).join(",")
- }).then(res => {
- this.$message({ type: 'success', message: `${this.formDialogTitles[this.formDialogType]}成功!` })
- this.formCancel()
- this.$refs.pageRef.refreshList()
- })
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .tab{
- padding: 20px 20px 0 20px;
- }
- </style>
|