tire-platform-ui/src/views/serviceConfiguration/modifyData/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left" @click="goBack(0)">返回列表 </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button class="el-button--small-yh" style="margin-left: 6px;" size="small" @click="submit">提 交 </el-button>
        <el-button
          class="el-button--small-yh"
          style="margin-left: 6px;"
          type="primary"
          size="small"
          @click="save"
          :disabled="form.approvalStatus != '录入'"
          >保 存
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form">
          <template slot="menuForm">
            <el-button icon="el-icon-search" type="primary" :disabled="data.length > 0 || form.approvalStatus != '录入'" @click="searchChange"
              >获取配置信息</el-button
            >
            <el-button icon="el-icon-search" type="success" :disabled="data.length == 0 || form.approvalStatus != '录入'" @click="getData"
              >获取原始信息</el-button
            >
          </template>
        </avue-form>
      </trade-card>
      <trade-card title="字段明细">
        <avue-crud
          :option="option"
          :data="data"
          id="out-table"
          ref="crud"
          @selection-change="selectionChange"
          v-model="rowFrom"
          @row-update="rowUpdate"
          @resetColumn="resetColumn('crud', 'option', 'optionBack', 415)"
          @saveColumn="saveColumn('crud', 'option', 'optionBack', 415)"
        >
          <template slot-scope="{ type, size, row, index }" slot="menu">
            <el-button
              size="small"
              type="text"
              icon="el-icon-edit"
              @click.stop="$refs.crud.rowEdit(row, index)"
              :disabled="form.approvalStatus != '录入'"
              >编 辑
            </el-button>
            <el-button size="small" icon="el-icon-delete" type="text" @click.stop="rowDel(row, index)" :disabled="form.approvalStatus != '录入'"
              >删 除</el-button
            >
          </template>
          <template slot-scope="{ type, disabled }" slot="fieldValueNewNameForm">
            <el-input v-if="rowFrom.fieldValueType == '输入框'" :disabled="disabled" v-model="rowFrom.fieldValueNewName"></el-input>
            <el-date-picker
              v-if="rowFrom.fieldValueType == '日期选择器'"
              v-model="rowFrom.fieldValueNewName"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd 00:00:00"
            >
            </el-date-picker>
            <div v-if="rowFrom.queryType != '业务来源'">
              <div v-if="rowFrom.queryType == '客服'">
                <dic-select
                  v-if="rowFrom.fieldValueType == '选择器'"
                  v-model="rowFrom.fieldValueNewName"
                  :label="rowFrom.fieldValueRetrieval"
                  :url="rowFrom.fieldValueUrl"
                  :filterable="true"
                  placeholder=""
                  @selectChange="dicChange(rowFrom.fieldValueNewName, $event,rowFrom.fieldValueRetrieval)"
                ></dic-select>
              </div>
              <div v-else>
                <dic-select
                  v-if="rowFrom.fieldValueType == '选择器' && rowFrom.queryType != '字典'"
                  v-model="rowFrom.fieldValueNewName"
                  key="id"
                  res="records"
                  :label="rowFrom.fieldValueRetrieval"
                  :url="rowFrom.fieldValueUrl"
                  :filterable="true"
                  :remote="true"
                  :dataName="rowFrom.fieldValueRetrieval"
                  placeholder=""
                  @selectChange="dicChange(rowFrom.fieldValueNewName, $event)"
                ></dic-select>
                <dic-select
                  v-if="rowFrom.fieldValueType == '选择器' && rowFrom.queryType == '字典'"
                  v-model="rowFrom.fieldValueNewName"
                  key="id"
                  label="dictValue"
                  keyValue="dictKey"
                  :url="rowFrom.fieldValueUrl"
                  placeholder=""
                  @selectChange="dicChange('字典', $event)"
                ></dic-select>
              </div>
            </div>
            <div v-if="rowFrom.queryType == '业务来源'" style="display: flex;">
              <dic-select
                v-if="rowFrom.fieldValueType == '选择器' && rowFrom.queryType != '字典'"
                v-model="rowFrom.fieldValueNewName"
                key="id"
                label="dictValue"
                keyValue="dictKey"
                :url="rowFrom.fieldValueUrl"
                placeholder=""
                @selectChange="dicChange('业务来源', $event)"
              ></dic-select>
              <el-input v-show="!rowFrom.fieldValueNew" v-model="form.srcCnName" placeholder="请选择" :disabled="true"> </el-input>
              <dic-select
                style="width: 100%;"
                v-show="rowFrom.fieldValueNew == 'OWN'"
                v-model="rowFrom.secondLevelName"
                placeholder="所属公司"
                key="id"
                label="deptName"
                url="/blade-system/dept/lazy-list?parentId=0"
                :filterable="true"
                @selectChange="dicChange('所属公司', $event)"
              ></dic-select>
              <dic-select
                style="width: 100%;"
                v-show="rowFrom.fieldValueNew == 'AGENT'"
                v-model="rowFrom.secondLevelName"
                placeholder="代理"
                key="id"
                label="cnName"
                res="records"
                url="/blade-los/bcorps/listByType?corpTypeName=代理客户"
                :filterable="true"
                :remote="true"
                dataName="cnName"
                @selectChange="dicChange('srcCnName', $event)"
              ></dic-select>
              <dic-select
                style="width: 100%;"
                v-show="rowFrom.fieldValueNew == 'SALES'"
                v-model="rowFrom.secondLevelName"
                placeholder="业务员"
                key="id"
                label="realName"
                res="records"
                url="/blade-user/page"
                :filterable="true"
                :remote="true"
                dataName="realName"
                @selectChange="dicChange('salesName', $event)"
              ></dic-select>
            </div>
          </template>
        </avue-crud>
      </trade-card>
    </div>
  </div>
</template>

<script>
import { getDetail, submit, getUpdate, removeItem, getItemDetail, checkUpdate } from "@/api/serviceConfiguration/modifyData";
import feeInfo from "@/components/tradeAgency/fee-info";
import dicSelect from "@/components/dicSelect/main";
import checkSchedule from "@/components/checkH/checkSchedule.vue";
import businessReports from "@/components/tradeAgency/businessReports.vue";
import reports from "@/components/tradeAgency/reports.vue";
import { getDicinit } from "@/api/dicSelect/index";
import _ from "lodash";
export default {
  name: "detailsPage",

  data() {
    return {
      data: [],
      selectionList: [],
      form: {
        type: 2,
        approvalStatus: "录入",
        updateItemList: []
      },
      rowFrom: {},
      optionForm: {
        // menuBtn: false,
        submitBtn: false,
        emptyBtn: false,
        span: 8,
        disabled: false,
        column: [
          {
            label: "业务类型",
            prop: "businessType",
            type: "select",
            dicData: [
              {
                value: "SE",
                label: "海运出口"
              },
              {
                value: "SI",
                label: "海运进口"
              },
              {
                value: "AE",
                label: "空运出口"
              },
              {
                value: "AI",
                label: "空运进口"
              },
              {
                value: "BGSE",
                label: "海运报关出口"
              },
              {
                value: "BGSI",
                label: "海运报关进口"
              },
              {
                value: "BGAE",
                label: "空运报关出口"
              },
              {
                value: "BGAI",
                label: "空运报关进口"
              }
            ],
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "检索类型",
            prop: "retrievalType",
            type: "select",
            dicData: [
              {
                value: "1",
                label: "业务单号"
              },
              {
                value: "2",
                label: "提单号"
              }
            ],
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "源单据单号",
            prop: "retrievalValue",
            rules: [
              {
                required: true,
                message: " ",
                trigger: "blur"
              }
            ]
          },
          {
            label: "创建日期",
            prop: "createTime",
            disabled: true
          },
          {
            label: "创建人",
            prop: "createUserName",
            disabled: true
          },
          {
            label: "备注",
            prop: "remarks"
          }
        ]
      },
      option: {},
      optionBack: {
        height: "auto",
        calcHeight: 30,
        menuWidth: 150,
        tip: false,
        border: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        selection: true,
        align: "center",
        index: true,
        column: [
          {
            label: "更改时间",
            prop: "updateTime",
            overHidden: true,
            editDisplay: false
          },
          {
            label: "字段描述",
            prop: "fieldDescribe",
            overHidden: true,
            editDisplay: false
          },
          {
            label: "字段原值",
            prop: "fieldValueName",
            overHidden: true,
            editDisplay: false,
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ]
          },
          {
            label: "字段新值",
            prop: "fieldValueNewName",
            span: 24,
            overHidden: true,
            rules: [
              {
                required: true,
                message: "",
                trigger: "blur"
              }
            ]
          },
          {
            label: "二级字段新值",
            prop: "secondLevelName",
            overHidden: true,
            editDisplay: false
          }
        ]
      }
    };
  },
  components: {
    dicSelect,
    feeInfo,
    checkSchedule,
    businessReports,
    reports
  },
  props: {
    detailData: Object
  },
  async created() {
    this.roleName = localStorage.getItem("roleName").split(",");
    this.saberUserInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    this.option = await this.getColumnData(this.getColumnName(415), this.optionBack);
    if (this.$route.query.billId) {
      this.getDetails(this.$route.query.billId);
    }
    console.log(this.detailData.id, 123123);
    if (this.detailData.id) {
      this.getDetails(this.detailData.id);
    }
  },
  methods: {
    rowUpdate(row, index, done, loading) {
      done();
      if (row.fieldValueType == "选择器") {
        this.data[index].fieldValueNew = row.fieldValueNew;
        this.data[index].fieldValueNewName = row.fieldValueNewName;
        this.data[index].secondLevel = row.secondLevel;
        this.data[index].secondLevelName = row.secondLevelName;
      } else {
        this.data[index].fieldValueNew = row.fieldValueNewName;
        this.data[index].fieldValueNewName = row.fieldValueNewName;
      }
    },
    searchChange() {
      this.form.updateItemList = [];
      getUpdate(this.form).then(res => {
        this.data = res.data.data.updateItemList;
      });
    },
    getData() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          let obj = {
            ...this.form
          };
          delete obj.updateItemList;
          getItemDetail(obj).then(res => {
            let obj = res.data.data;
            this.data.forEach(row => {
              if (row.fieldValueType == "选择器") {
                row.fieldValue = obj[row.mainFieldId];
                row.fieldValueName = obj[row.mainFieldCname];
              } else {
                row.fieldValue = obj[row.field];
                row.fieldValueName = obj[row.field];
              }
            });
          });
        } else {
          return false;
        }
      });
    },
    dicChange(name, row,label) {
      if (name == "字典" || name == "业务来源") {
        if (row) {
          this.rowFrom.fieldValueNew = row.dictKey;
          this.rowFrom.fieldValueNewName = row.dictValue;
          this.rowFrom.secondLevel = null;
          this.rowFrom.secondLevelName = null;
        } else {
          this.rowFrom.fieldValueNew = null;
          this.rowFrom.fieldValueNewName = null;
          this.rowFrom.secondLevel = null;
          this.rowFrom.secondLevelName = null;
        }
      } else if (name == "srcCnName") {
        console.log(row);
        if (row) {
          this.$set(this.rowFrom, "secondLevel", row.id);
          this.$set(this.rowFrom, "secondLevelName", row.cnName);
          // this.rowFrom.secondLevel = row.id
          // this.rowFrom.secondLevelName = row.cnName
        } else {
          this.rowFrom.secondLevel = null;
          this.rowFrom.secondLevelName = null;
        }
      } else if (name == "所属公司") {
        if (row) {
          this.$set(this.rowFrom, "secondLevel", row.id);
          this.$set(this.rowFrom, "secondLevelName", row.deptName);
          // this.rowFrom.secondLevel = row.id
          // this.rowFrom.secondLevelName = row.deptName
        } else {
          this.rowFrom.secondLevel = null;
          this.rowFrom.secondLevelName = null;
        }
      } else if (name == "salesName") {
        if (row) {
          this.$set(this.rowFrom, "secondLevel", row.id);
          this.$set(this.rowFrom, "secondLevelName", row.realName);
          // this.rowFrom.secondLevel = row.id
          // this.rowFrom.secondLevelName = row.deptName
        } else {
          this.rowFrom.secondLevel = null;
          this.rowFrom.secondLevelName = null;
        }
      } else {
        if (row) {
          this.$set(this.rowFrom, "fieldValueNew", row.id);
          this.$set(this.rowFrom, "fieldValueNewName", label?row[label]:row.cnName);
          // this.rowFrom.fieldValueNew = row.id
          // this.rowFrom.fieldValueNewName = row.cnName
        } else {
          this.rowFrom.fieldValueNew = null;
          this.rowFrom.fieldValueNewName = null;
        }
      }
    },
    rowDel(row, index) {
      this.$confirm("确定删除数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.id) {
          removeItem({ ids: row.id }).then(res => {
            this.data.splice(index, 1);
            this.$message.success("成功删除");
          });
        } else {
          this.data.splice(index, 1);
        }
      });
    },
    getDetails(id) {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(255,255,255,0.7)"
      });
      getDetail({ id: id })
        .then(res => {
          this.form = res.data.data;
          this.data = res.data.data.updateItemList;
          if (res.data.data.approvalStatus != "录入") {
            this.optionForm.disabled = true;
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    inEdit() {},
    save(type) {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "加载中",
            spinner: "el-icon-loading",
            background: "rgba(255,255,255,0.7)"
          });
          this.form.updateItemList = this.data;
          submit(this.form)
            .then(res => {
              this.$message.success("保存成功");
              this.getDetails(res.data.data.id);
            })
            .finally(() => {
              loading.close();
            });
        } else {
          return false;
        }
      });
    },
    submit() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          // for (let row of this.data) {
          //     if (!row.fieldValueNewName) {
          //         this.$refs.crud.rowCell(row, row.$index)
          //         return this.$message.error("请完善字段明细");
          //     }
          // }
          this.$confirm("是否提交数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let obj = {
              ...this.form,
              updateItemList: this.data,
              url: "/serviceConfiguration/modifyData/index",
              pageStatus: "",
              pageLabel: "修改数据"
            };
            const loading = this.$loading({
              lock: true,
              text: "加载中",
              spinner: "el-icon-loading",
              background: "rgba(255,255,255,0.7)"
            });
            checkUpdate(obj)
              .then(res => {
                this.$message.success("提交成功");
                this.getDetails(res.data.data.id);
              })
              .finally(() => {
                loading.close();
              });
          });
        } else {
          return false;
        }
      });
    },
    //自定义列保存
    async saveColumn(ref, option, optionBack, code) {
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumn(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    goBack(type) {
      this.$emit("goBack", type);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 8px !important;
}

::v-deep .el-table .cell {
  padding: 0 2px !important;

  .el-form-item {
    margin-bottom: 0px !important;
  }
}

::v-deep .avue-crud .el-table .el-form-item__label {
  left: -1px;
}

::v-deep#out-table .back-one {
  background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
  background: #ecf5ff !important;
}

::v-deep .el-table--small td,
.el-table--small th {
  padding: 2px !important;
}

::v-deep .el-card__body {
  padding: 3px 10px;
}
</style>