123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693 |
- <template>
- <zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title + '-列表', essential: true }]">
- <template slot-scope="{ activeKey, data }">
- <div
- :style="{
- width: '100%',
- height: activeKey == 'list' ? '100%' : '0px',
- overflow: 'hidden'
- }"
- >
- <template-page
- ref="pageRef"
- :get-list="getList"
- :table-attributes="tableAttributes"
- :table-events="tableEvents"
- :options-evens-group="optionsEvensGroup"
- :moreParameters="moreParameters"
- :column-parsing="columnParsing"
- :exportList="exportList"
- :operation="operation()"
- >
- </template-page>
- </div>
- <div v-if="~['add', 'edit'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
- <zj-form-container ref="formRef" :form-data="formData" :form-attributes="{ size: 'mini' }">
- <zj-form-module title="" label-width="100px" :form-data="formData" :form-items="formItems">
- <div
- slot="internal-bottom"
- style="text-align: right; margin-bottom: 20px; box-sizing: border-box; padding-right: 10px"
- >
- <el-button size="mini" @click="data.removeTab()">取消</el-button>
- <el-button size="mini" type="primary" @click="queding(data.removeTab)">确定</el-button>
- </div>
- </zj-form-module>
- </zj-form-container>
- </div>
- </template>
- </zj-tab-page>
- </template>
- <script>
- import TemplatePage from '@/components/template/template-page-1.vue'
- import import_mixin from '@/components/template/import_mixin.js'
- import operation_mixin from '@/components/template/operation_mixin.js'
- import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
- import { getBrandList } from '@/api/miniapp'
- import { getClassifyList } from '@/api/goods'
- import {
- goodsMaterialList,
- goodsMaterialListExport,
- goodsMaterialAdd,
- goodsMaterialUpdate,
- goodsMaterialBatchUpdateStatus,
- goodsMaterialItemCount,
- goodsMaterialDetail
- } from '@/api/commercialMaterial.js'
- export default {
- components: { TemplatePage },
- mixins: [import_mixin, operation_mixin],
- data() {
- return {
- // 表格属性
- tableAttributes: {
- // 启用勾选列
- selectColumn: true
- },
- // 表格事件
- tableEvents: {
- 'selection-change': this.selectionChange
- },
- // 勾选选中行
- recordSelected: [],
- formData: {
- companyWechatId: '',
- brandId: '',
- mainId: '',
- smallId: '',
- seriesName: '',
- goodsName: '',
- specsName: '',
- state: '',
- unit: '',
- isVirtyual: '',
- remark: '',
- items: []
- },
- isEditIndex: -1,
- brandList: [],
- ClassifyList: []
- }
- },
- computed: {
- // 事件组合
- optionsEvensGroup() {
- return [
- [
- [
- this.optionsEvensAuth('add', {
- click: () => {
- this.$refs.tabPage.addTab({
- activeKey: 'add',
- key: 'add',
- label: '新增',
- triggerEvent: () => {
- this.openForm()
- }
- })
- }
- })
- ]
- // [
- // this.optionsEvensAuth("pilqy", {
- // click: () => {
- // }
- // })
- // ],
- // [
- // this.optionsEvensAuth("piljy", {
- // click: () => {
- // }
- // })
- // ]
- ]
- ]
- },
- // 更多参数
- moreParameters() {
- return []
- },
- formItems() {
- return [
- {
- name: 'slot-component',
- md: 12,
- formItemAttributes: {
- label: '所属商户'
- },
- render: (h, { props }) => {
- return <el-input disabled={true} value={JSON.parse(localStorage.getItem('greemall_user')).companyName} />
- }
- },
- {
- name: 'el-select',
- md: 6,
- options: this.brandList,
- attributes: {
- disabled: false,
- placeholder: '请选择',
- clearable: true,
- filterable: true
- },
- formItemAttributes: {
- label: '选择品牌',
- prop: 'brandId',
- rules: [...required]
- },
- events: {
- change: val => {
- this.formData.brandName = this.brandList.find(item => item.value === val)?.label || ''
- }
- }
- },
- {
- name: 'el-select',
- md: 6,
- options: this.ClassifyList.map(item => ({ label: item.name, value: item.categoryId })),
- attributes: {
- disabled: false,
- placeholder: '请选择',
- clearable: true,
- filterable: true
- },
- formItemAttributes: {
- label: '选择大类',
- prop: 'mainId',
- rules: [...required]
- },
- events: {
- change: val => {
- this.formData.mainName =
- this.ClassifyList.map(item => ({ label: item.name, value: item.categoryId })).find(
- item => item.value === val
- )?.label || ''
- this.formData.smallId = ''
- }
- }
- },
- {
- name: 'el-select',
- md: 6,
- options: (this.ClassifyList.find(item => item.categoryId === this.formData.mainId)?.children || [])?.map(
- item => ({ label: item.name, value: item.categoryId })
- ),
- attributes: {
- disabled: false,
- placeholder: '请选择',
- clearable: true,
- filterable: true
- },
- formItemAttributes: {
- label: '选择小类',
- prop: 'smallId',
- rules: [...required]
- },
- events: {
- change: val => {
- this.formData.smallName =
- (this.ClassifyList.find(item => item.categoryId === this.formData.mainId)?.children || [])
- ?.map(item => ({ label: item.name, value: item.categoryId }))
- .find(item => item.value === val)?.label || ''
- }
- }
- },
- {
- name: 'el-input',
- md: 6,
- attributes: {
- disabled: false,
- placeholder: '请输入'
- },
- formItemAttributes: {
- label: '系列名称',
- prop: 'seriesName'
- }
- },
- {
- name: 'el-input',
- md: 6,
- attributes: {
- disabled: false,
- placeholder: '请输入'
- },
- formItemAttributes: {
- label: '商品名称',
- prop: 'goodsName',
- rules: [...required]
- }
- },
- {
- name: 'el-input',
- md: 6,
- attributes: {
- disabled: false,
- placeholder: '请输入'
- },
- formItemAttributes: {
- label: '规格型号',
- prop: 'specsName',
- rules: [...required]
- }
- },
- {
- md: 6,
- name: 'el-radio',
- options: [
- { label: '有效', value: 'ON' },
- { label: '无效', value: 'OFF' }
- ],
- attributes: {},
- formItemAttributes: {
- label: '状态',
- prop: 'state',
- rules: [...required]
- }
- },
- {
- md: 6,
- name: 'el-radio',
- options: [
- { label: '整套', value: 'C' },
- { label: '单个', value: 'I' }
- ],
- attributes: {},
- formItemAttributes: {
- label: '单位',
- prop: 'unit',
- rules: [...required]
- }
- },
- {
- md: 6,
- name: 'el-radio',
- options: [
- { label: '是', value: 'YES' },
- { label: '否', value: 'NO' }
- ],
- attributes: {},
- formItemAttributes: {
- label: '虚拟商品',
- prop: 'isVirtyual',
- rules: [...required]
- }
- },
- ...(() => {
- if (this.formData.isVirtyual === 'NO') {
- this.isEditIndex = -1
- return [
- {
- name: 'slot-component',
- md: 24,
- formItemAttributes: {
- label: '子物料',
- prop: 'items',
- rules: [...required]
- },
- render: (h, { props }) => {
- return (
- <div>
- <el-button
- size="mini"
- type="primary"
- onClick={() => {
- if (this.isEditIndex > -1) {
- this.$refs.formRef.validateField(
- this.getVfyKey(this.isEditIndex),
- (valid, invalidFields, errLabels) => {
- if (valid && this.eidtItems()) {
- this.formData.items.unshift({
- name: '',
- qty: '',
- type: '',
- uniqueCode: '',
- unit: ''
- })
- this.isEditIndex = 0
- }
- }
- )
- } else if (this.eidtItems()) {
- this.formData.items.unshift({
- name: '',
- qty: '',
- type: '',
- uniqueCode: '',
- unit: ''
- })
- this.isEditIndex = 0
- }
- }}
- >
- 新增
- </el-button>
- <zj-table columns={this.productColumns} table-data={this.formData.items} />
- </div>
- )
- }
- }
- ]
- }
- return []
- })(),
- {
- name: 'el-input',
- md: 24,
- attributes: {
- disabled: false,
- type: 'textarea',
- rows: 3,
- placeholder: '请输入'
- },
- formItemAttributes: {
- label: '备注',
- prop: 'remark',
- rules: []
- }
- }
- ]
- },
- productColumns() {
- return [
- {
- columnAttributes: {
- label: '物料类型',
- prop: 'type'
- },
- render: (h, { row, column, index }) => {
- return (
- <div class="redbordererr">
- <el-form-item
- label=""
- label-width="0px"
- prop={`items.${index}.${column.columnAttributes.prop}`}
- rules={required}
- >
- <el-select
- disabled={this.isEditIndex !== index}
- value={row[column.columnAttributes.prop]}
- onInput={val => {
- row[column.columnAttributes.prop] = val
- }}
- placeholder="请选择"
- >
- {[
- { value: 'INSIDE', label: '内机' },
- { value: 'OUT', label: '外机' },
- { value: 'PARTS', label: '配件' }
- ].map((item, index_) => (
- <el-option key={index_} label={item.label} value={item.value}></el-option>
- ))}
- </el-select>
- </el-form-item>
- </div>
- )
- }
- },
- {
- columnAttributes: {
- label: '名称',
- prop: 'name'
- },
- render: (h, { row, column, index }) => {
- return (
- <div class="redbordererr">
- <el-form-item
- label=""
- label-width="0px"
- prop={`items.${index}.${column.columnAttributes.prop}`}
- rules={required}
- >
- <el-input
- disabled={this.isEditIndex !== index}
- value={row[column.columnAttributes.prop]}
- onInput={val => {
- row[column.columnAttributes.prop] = val
- }}
- placeholder="请输入内容"
- ></el-input>
- </el-form-item>
- </div>
- )
- }
- },
- {
- columnAttributes: {
- label: '是否一物一码',
- prop: 'uniqueCode'
- },
- render: (h, { row, column, index }) => {
- return (
- <div class="redbordererr">
- <el-form-item
- label=""
- label-width="0px"
- prop={`items.${index}.${column.columnAttributes.prop}`}
- rules={required}
- >
- <el-select
- disabled={this.isEditIndex !== index}
- value={row[column.columnAttributes.prop]}
- onInput={val => {
- row[column.columnAttributes.prop] = val
- }}
- placeholder="请选择"
- >
- {[
- { label: '是', value: 'YES' },
- { label: '否', value: 'NO' }
- ].map((item, index_) => (
- <el-option key={index_} label={item.label} value={item.value}></el-option>
- ))}
- </el-select>
- </el-form-item>
- </div>
- )
- }
- },
- {
- columnAttributes: {
- label: '数量',
- prop: 'qty'
- },
- render: (h, { row, column, index }) => {
- return (
- <div class="redbordererr">
- <el-form-item
- label=""
- label-width="0px"
- prop={`items.${index}.${column.columnAttributes.prop}`}
- rules={required}
- >
- <el-input
- disabled={this.isEditIndex !== index}
- value={row[column.columnAttributes.prop]}
- onInput={val => {
- row[column.columnAttributes.prop] = val
- }}
- placeholder="请输入内容"
- ></el-input>
- </el-form-item>
- </div>
- )
- }
- },
- {
- columnAttributes: {
- label: '单位',
- prop: 'unit'
- },
- render: (h, { row, column, index }) => {
- return (
- <div class="redbordererr">
- <el-form-item
- label=""
- label-width="0px"
- prop={`items.${index}.${column.columnAttributes.prop}`}
- rules={required}
- >
- <el-input
- disabled={this.isEditIndex !== index}
- value={row[column.columnAttributes.prop]}
- onInput={val => {
- row[column.columnAttributes.prop] = val
- }}
- placeholder="请输入内容"
- ></el-input>
- </el-form-item>
- </div>
- )
- }
- },
- {
- columnAttributes: {
- label: '操作'
- },
- render: (h, { row, column, index }) => {
- return (
- <div style="padding-left:10px">
- <el-button
- type="text"
- onClick={() => {
- this.delProduct(row, index)
- }}
- >
- 删除
- </el-button>
- {this.isEditIndex == index && (
- <el-button
- type="text"
- onClick={() => {
- this.$refs.formRef.validateField(
- this.getVfyKey(this.isEditIndex),
- (valid, invalidFields, errLabels) => {
- if (valid && this.eidtItems()) {
- this.isEditIndex = -1
- }
- }
- )
- }}
- >
- 确定
- </el-button>
- )}
- {this.isEditIndex == -1 && (
- <el-button
- type="text"
- onClick={() => {
- this.isEditIndex = index
- }}
- >
- 编辑
- </el-button>
- )}
- </div>
- )
- }
- }
- ]
- }
- },
- methods: {
- // 列表请求函数
- getList: goodsMaterialList,
- // 列表导出函数
- exportList: goodsMaterialListExport,
- // 表格列解析渲染数据更改
- columnParsing(item, defaultData) {
- return defaultData
- },
- // 监听勾选变化
- selectionChange(data) {
- this.recordSelected = data
- },
- getVfyKey(index, bool = true) {
- return [
- ...(() => {
- if (bool) {
- return [`items`]
- }
- return []
- })(),
- ...(() => {
- if (index > -1) {
- return [
- `items.${index}.name`,
- `items.${index}.type`,
- `items.${index}.uniqueCode`,
- `items.${index}.qty`,
- `items.${index}.unit`
- ]
- }
- return []
- })()
- ]
- },
- eidtItems() {
- try {
- this.formData.items.map((item, index) => {
- this.formData.items.map((item2, index2) => {
- if (index !== index2 && `${item.type}_${item.name}` == `${item2.type}_${item2.name}`) {
- throw new Error('')
- }
- })
- })
- } catch (error) {
- this.$message.warning('子物料重复')
- return false
- }
- return true
- },
- operation() {
- return this.operationBtn({
- edit: {
- click: ({ row, index, column }) => {
- this.$refs.tabPage.addTab({
- activeKey: 'edit',
- key: 'edit',
- label: '编辑',
- triggerEvent: () => {
- this.openForm()
- goodsMaterialDetail({ id: row.id }).then(res => {
- this.formData = res.data
- console.log(this.formData)
- })
- }
- })
- }
- }
- })
- },
- openForm() {
- this.formCancel()
- getBrandList({
- status: true
- }).then(res => {
- this.brandList = res.data.map(item => ({
- label: item.brandName,
- value: item.id
- }))
- })
- getClassifyList({
- type: 2,
- status: true
- }).then(res => {
- this.ClassifyList = res.data
- })
- },
- formCancel() {
- this.$refs?.formRef?.resetFields()
- this.$data.formData = this.$options.data().formData
- },
- queding(removeTab) {
- this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
- if (valid && this.eidtItems()) {
- ;[goodsMaterialAdd, goodsMaterialUpdate][this.formData.id ? 1 : 0](this.formData).then(res => {
- this.$message({
- type: 'success',
- message: '保存成功'
- })
- this.$refs.pageRef.refreshList()
- removeTab()
- })
- }
- })
- },
- delProduct(row, index) {
- if (index > this.isEditIndex) {
- this.formData?.items?.splice(index, 1)
- } else if (index == this.isEditIndex) {
- this.formData?.items?.splice(index, 1)
- this.isEditIndex = -1
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .tab {
- padding: 20px 20px 0 20px;
- }
- </style>
|